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