网页header固定不动+隐藏二级菜单栏
2017-03-24 17:20
573 查看
图2：
图3：
<!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=""> <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%;
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();
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面
- [总结]DataGrid 固定表头实现（纵向和横向滚动条滚动，而Header不动）
- css写的手机网站页面如何使网页左右固定不动？
- 用html语言写一个隐藏二级菜单的菜单栏
- 网页背景图固定不动，不跟随滚动条滚动
- 网站导航条固定在网页顶部不动
- 图片悬浮网页侧边栏固定不动代码
- 网页背景图固定不动，不跟随滚动条滚动
- 滚动条下拉时 table 的thead 固定在网页固定在顶部不动
- 用CSS实现拉动滚动条时固定网页背景不动
- 网页背景图固定不动, 不跟随滚动条滚动
- PinnedHeaderExpandableListView，可固定顶部标题的二级列表菜单
- 利用JavaScript实现天气菜单栏在网页边角处展现和隐藏的效果
- jQuery网页右侧固定层显示隐藏在线qq客服代码
- 网页背景图固定不动，不跟随滚动条滚动
- 使用touch事件实现手机网页右侧菜单栏拖动显示隐藏
- 网页背景图固定不动，不跟随滚动条滚动
- 隐藏GridControl的“Drag a column header here to group by that column”
- 网页打印之分页打印、隐藏网页元素--[转]
- 网页布局左动态 右固定