網頁header固定不動+隱藏二級選單欄
阿新 • • 發佈：2019-02-10
效果圖如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>index_header</title> <linK rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_643sxisspozs38fr.css"> <link rel="stylesheet" href="../asset/css/style.css"> <link rel="stylesheet" href="../asset/css/reset.css"> <link rel="stylesheet" href="../asset/css/index_header.css"> <script src="../Plugin/jquery-3.1.1.js"></script> </head> <body> <div class="header-ctt"> <div class="header-layer"></div> <div class="header-list-ctt"> <span class="header-logo"><img src="../asset/images/itLogo.png"></span> <ul class="header-list"> <li class="header-li header-li-focus"> <a class="header-item-parent" href="../view/index.html"> <span class="header-item-spa">首頁</span> </a> </li> <li class="header-li"> <a class="header-item-parent" href=""> <span class="header-item-spa">分類瀏覽</span> <i class="iconfont icon-xxiala"></i> </a> <div class="header-item-children" style="display: none;"> <span class="header-item-tri"></span> <ul class="header-item-children-ctt"> <li class="header-item-child-ctt"> <a class="header-item-child" href="../view/article_list.html">技術資訊</a> </li> <li class="header-item-child-ctt"> <a class="header-item-child" href="../view/article_list.html">資源工具</a> </li> <li class="header-item-child-ctt"> <a class="header-item-child" href="../view/article_list.html">web前端</a> </li> <li class="header-item-child-ctt"> <a class="header-item-child" href="../view/article_list.html">java</a> </li> </ul> </div> </li> </ul> <div id="headerUser"> <!--使用者資訊（已登入）--> <div class="header-user-ctt"> <span class="header-user-"> <a class="header-msg-ctt" href="../view/notice.html?navUrl=notice"> <span class="has-msg hide"></span> <span class="header-msg"><i class="iconfont icon-tongzhi"></i></span> </a> <a href="javascript:void(0);" class="h-header-clk"> <span class="header-username">haha</span> </a> <a href="javascript:void(0);" class="header-img-ctt h-header-clk"> <img src="../asset/images/default_avatar.png"> <i class="iconfont icon-xxiala"></i> </a> </span> <div class="header-userlist-ctt" style="display: none"> <div class="header-userlist-layer"></div> <ul class="header-userlist"> <li class="header-useritem"> <a href="../view/addArticle.html" class="header-useritem-a">釋出作品</a> </li> <li class="header-useritem"> <a href="../view/myArticle.html?navUrl=myArticle" class="header-useritem-a">我的作品</a> </li> <li class="header-useritem"> <a href="../view/myCollect.html?navUrl=myCollect" class="header-useritem-a">我的收藏</a> </li> <li class="header-useritem"> <a class="header-useritem-a" href="../view/mycomment.html?navUrl=comment">我的評論</a> </li> <li class="header-useritem"> <a href="../view/myFollow.html?navUrl=follow" class="header-useritem-a">我的關注</a> </li> <li class="header-useritem"> <a href="../view/mySetting.html?navUrl=setting" class="header-useritem-a">資料修改</a> </li> <li class="header-useritem"> <a href="#" class="header-useritem-a logOut">退出登入</a> </li> </ul> </div> </div> </div> <!--未登入--> <!-- <div class="header-user display-none"> <span> <a href="">登入</a> <span>|</span> <a href="../view/register.html">註冊</a> </span> </div> --> </div> </div> <script src="../asset/js/index_header.html.js"></script> </body> </html>
.header-ctt {/*頁面下拉，header固定不動*/ position: fixed; top: 0; left: 0; height: 60px; width: 100%; border-bottom: 1px solid #d8d8d8; text-align: center; z-index: 100; font-size: 16px; background-color: #fff; color: #333; -webkit-box-shadow: 0 0 3px rgba(102,102,102, .05); -moz-box-shadow: 0 0 3px rgba(102,102,102, .05); box-shadow: 0 0 3px rgba(102,102,102, .05); } .header-ctt a,.header-ctt a:-webkit-any-link{ color: #333; text-decoration: none; } body{ background: #fff; } .header-ctt.header-black{ background: rgba(0, 0, 0, .5); } .header-black .header-layer{ position: absolute; top: 0; left: 0; width:100%; height: 100%; z-index: 101; } .header-layer{ background: rgba(0, 0, 0, .5); } .header-ctt .header-list-ctt{ position: relative; margin: 0 auto; max-width: 1200px; min-width: 1024px; height: 100%; line-height: 60px; z-index: 102; } .header-ctt .header-list{ font-weight: bold; } .header-logo img{ float: left; display: inline-block; margin-right: 10px; height: 54px; width: 54px; border-radius: 27px; margin-left: 15px; margin-top: 3px; } .header-li{ float: left; display: inline-block; padding-right: 10px; margin-left: 60px; font-size: 16px; font-weight: bold; color: #000; position: relative; } .header-li a span{ height: 60px; line-height: 60px; text-align: center; color: #000; } .header-ctt .header-list-ctt .header-list{ float: left; display: inline-block; position: relative; } .header-ctt a ,.header-ctt a:-webkit-any-link ,.header-ctt a:hover{ color: #333; } .header-black.header-ctt a ,.header-black.header-ctt a:-webkit-any-link ,.header-black.header-ctt a:hover{ color: #fff; } .header-ctt .header-li-focus .header-item-parent ,.header-ctt .header-li-focus .header-item-parent:hover{ color: #e72233; } .header-ctt .header-li-focus .header-item-parent:hover{ color: #e72233; } .header-ctt .header-li-focus .header-item-parent .iconfont{ font-size: 18px; } .header-ctt .header-list-ctt .header-user-ctt{ float: right; } .header-item-children{ position: absolute; top: 60px; left: 0; width: 270px; box-sizing: border-box; z-index: 200; } .header-item-tri{ display: block; position: absolute; top: 0; left: 50px; width: 13px; height: 11px; background-image: url("../../asset/images/header_tri.png"); background-size: 100%; background-repeat: no-repeat; z-index: 204; } .header-black .header-item-tri{ background-image: url("../../asset/images/header_tri_black.png"); } .header-item-children-ctt{ margin-top: 10px; padding: 20px; border: 1px solid #e5e5e5; overflow: hidden; background-color: #fff; } .header-black .header-item-children-ctt{ border: none; overflow: hidden; background: rgba(0, 0, 0, .6); } .header-item-children-ctt li{ float: left; display: inline-block; padding-top: 18px; box-sizing: border-box; width: 50%; list-style: none; } .header-item-children-ctt li:nth-child(odd){ border-right: 1px solid #eee; } .header-black .header-item-children-ctt li:nth-child(odd){ border-right: 1px solid #000; } .header-item-children-ctt li:first-child, .header-item-children-ctt li:nth-child(2){ padding-top: 0; } .header-item-children .header-item-child-ctt .header-item-child{ display: block; line-height: 16px; font-size: 16px; font-weight: normal; color: #333; text-align: center; } .header-black .header-item-children .header-item-child-ctt .header-item-child{ color: #fff; } .header-item-children-ctt li .header-item-child:hover ,.header-black .header-item-children-ctt li .header-item-child:hover{ color: #e82838; } #headerUser{ float: right; width: 200px; overflow: hidden; } .header-userlist-ctt{ z-index: 200; } #headerUser .header-user-{ display: block; height: 60px; width: 200px; overflow: hidden; font-size: 16px; font-weight: bold; line-height: 60px; } #headerUser .header-user- a{ float: left; display: inline-block; margin-right: 10px; overflow: hidden; } .header-img-ctt{ height: 60px; line-height: 60px; box-sizing: border-box; } .header-img-ctt .iconfont{ float: right; line-height: 60px; } #headerUser .header-user- img{ width: 50px; height: 50px; border-radius: 25px; margin-top: 5px; } #headerUser .header-userlist{ box-sizing: border-box; width: 200px; font-size: 16px; border: 1px solid #e5e5e5; background-color: #fff; } .header-black #headerUser .header-userlist{ background-color: #000; border: none; } #headerUser .header-userlist .header-useritem{ margin-bottom: 3px; width: 100%; height: 49px; line-height: 49px; background-image: url("../../asset/images/header_right_linner.png"); background-size:100%; background-repeat: no-repeat; background-position: bottom; text-align: center; } #headerUser .header-userlist .header-useritem:last-child ,.header-black #headerUser .header-userlist .header-useritem:last-child{ background: none; margin-bottom: 0; } .header-black #headerUser .header-userlist .header-useritem{ background-image: url("../../asset/images/header_rightb_linner.png"); } #headerUser .header-userlist .header-useritem a{ color: #666; } .header-black #headerUser .header-userlist .header-useritem a{ color: #ddd; } #headerUser .header-userlist .header-useritem a:hover ,.header-black #headerUser .header-userlist .header-useritem a:hover{ color: #e82838; } .header-usitem-bottom{ display: block; height: 1px; width: 200px; } .header-usitem-bottom img{ display: block; width: 100%; height: 100%; } .header-msg-ctt{ position: relative; overflow: visible !important; margin-right: 31px !important; } .header-msg-ctt .has-msg{ position: absolute; left: 8px; top: 12px; padding: 0 6px; height: 18px; line-height: 16px; font-size: 12px; background-color: #fa4a58; color: #fff; border-radius: 10px; font-weight: normal; } .header-users a:hover{ color: #e82838; } .header-item-spa:hover{ text-decoration: underline; }
if($('.has-msg').hasClass('hide')){ $('.has-msg').fadeIn('slow', function(e){ $('.has-msg').removeClass('hide'); }); }else { $('.has-msg').fadeOut('slow', function (e) { $('.has-msg').addClass('hide'); }); } $('.header-li').hover(function(e){ var target = e.target; var ul = $(target).children('.header-item-children'); $('.header-li .header-item-children').hide(); if(ul.length > 0){ $(ul[0]).show(); } }, function(e){ var target = e.target; var ul = $(target).children('.header-item-children'); if(ul.length > 0){ $(ul[0]).hide(); } }); $('.header-item-children').hover(function(e){},function(e){ $('.header-item-children').hide(); }); $('.header-user-ctt').hover(function(){ $('.header-userlist-ctt').show(); },function(){ $('.header-userlist-ctt').hide(); });