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