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