jquery实现带下拉网站顶部固定导航条效果代码

代码语言:html

所属分类:菜单导航

代码描述:jquery实现一个带二级下拉菜单的网站顶部固定导航条效果代码,往下滚动的时候导航条会固定在顶部。

代码标签: 下拉 菜单 顶部 固定 导航

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        *,*:after,*:before {
	box-sizing:border-box
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
	margin:0;
	padding:0
}
body,button,input,select,textarea {
	font:12px Arial,Helvetica,sans-serif
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	color:#333;
	font-family:'PingFang SC','微软雅黑','YaHei','黑体','Hei',Tahoma,Helvetica,arial,sans-serif
}
address,cite,dfn,em,var {
	font-style:normal
}
code,kbd,pre,samp {
	font-family:courier new,courier,monospace
}
small {
	font-size:12px
}
ul,ol,li {
	list-style:none
}
a {
	text-decoration:none;
	outline:0
}
a:hover {
	text-decoration:underline
}
sup {
	vertical-align:text-top
}
sub {
	vertical-align:text-bottom
}
legend {
	color:#000
}
fieldset,img {
	border:0
}
table {
	border-collapse:collapse;
	border-spacing:0
}
img {
	vertical-align:top;
	display:inline-block;
	background-color:transparent
}
a {
	color:#ff6d01
}
a:hover {
	color:#cd5700
}
p {
	font-size:13px;
	line-height:1.6;
	color:#353535
}
.clearfix {
	*zoom:1
}
.clearfix:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:".";
	clear:both;
	height:0;
	line-height:0;
	overflow:hidden
}
.gradient-primary {
	background-color:#ff6d01;
	background-image:-moz-linear-gradient(75deg,#ff7e00 0,#ff3f00 53%,#f00 100%);
	background-image:-webkit-linear-gradient(75deg,#ff7e00 0,#ff3f00 53%,#f00 100%);
	background-image:-ms-linear-gradient(75deg,#ff7e00 0,#ff3f00 53%,#f00 100%);
	background-image:linear-gradient(75deg,#ff7e00 0,#ff3f00 53%,#f00 100%)
}
.ui-btn {
	display:inline-block;
	padding:6px 12px;
	line-height:18px;
	border:1px solid #ff6d01;
	border-radius:3px;
	color:#ff6d01;
	background-color:#fff;
	cursor:pointer;
	vertical-align:middle;
	text-align:center;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	tr.........完整代码请登录后点击上方下载按钮下载查看

网友评论0