html布局_实战-header的布局及交互（Html+Css+jQuery）

默认效果：

展开效果：

废话不多说，直接上代码：

Html Code：

LOGO //-->h-nu-default-icon 放默认图标 //-->h-nu-close-icon 放关闭X 图标

//这里还可以放登陆-退出等div的box，布局要做好扩展

//h-nav-box 这个是导航box 首页 大赛简介 组织机构 赛程安排 奖项设置 参赛作品要求 评审委员会 实习招聘//这里可以是 其他box，这里放的是一个a标签 报名入口

//hNuMask 是背景遮罩曾，可以全局的 注意：⚠️锚点定位栏目结构：-->赛程安排 id="scplan"

赛程安排

Css Code//-->遮罩的样式.cMask {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0,0,0,.8);    z-index: 15;    display: none; }.cMask.show {    display: block;}.header {    background: #060634;    display: none;    border: 1px solid #352CC5;    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.10);    height: 46px;    line-height: 46px;    font-size: 12px;    color: #FFFFFF;    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    z-index: 20;}//按钮.h-nu-btn {    width: 46px;    height: 46px;    position: relative; //如果logo文字太长，把图标挤下来了，可以考虑fixed    top: 0;    right: 0;}.header .h-nu-default-icon {    width: 46px;    height: 46px;    display: block;    background: #352CC5 url(../img/default_icon.png) center;    background-repeat: no-repeat;}.header .h-nu-close-icon {    width: 46px;    height: 46px;    display: none; //默认是隐藏的    background: #352CC5 url(../img/close.png) center no-repeat;    top: 0px;    position: absolute;}//header 点击的时候，新增active的时候，关闭图标显示。.header.active .h-nu-close-icon {    display: block;}//header 点击的时候，新增active的时候，ul所在box显示。.header.active .h-nu-box {    display: block;}-->ul.nav样式 太普遍了，就...省略了..ofh {    overflow: hidden;}

Js Codefunction activeSideBarFixed() { //滚动吸顶  var $activeSideBar = $('.nav-resumewrap');//要吸顶的ul  var navTop = 0;  if ($activeSideBar[0]) {    navTop = $activeSideBar.offset().top;  }  $(window).scroll(function() {    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;    if (scrolltop > navTop) {      sideTop = scrolltop - navTop;      $activeSideBar.addClass('fixed');      //添加fixed样式即：.nav-resumewrap.fixed{...}    } else {      $activeSideBar.removeClass('fixed');    }  });};//toast 方法function ajax_handle_message(msg){//操作信息提示方法    var $handleMessagePop = $('#handleMessagePop');    $handleMessagePop.text(msg).addClass('show');    setTimeout(function(){        $handleMessagePop.removeClass('show').empty();    },1000);};function hNuToggle() {    var $hNuBtn = $('#hNuBtn'),        $hNuMask = $('#cMask'),//全局遮罩元素        $html = $('html'),        winHeight = $(window).height() + 'px',        isOfh = false;   //-->图标点击执行事件    $hNuBtn.off('click').on('click', function() {        var $t = $(this);        $t.parent().toggleClass('active');        $hNuMask.toggleClass('show');        $html.toggleClass('ofh');        isOfh = $html.hasClass('ofh');        if (isOfh) {            $html.css('height', winHeight);        }    });  //-->遮罩点击执行事件    $hNuMask.off('click').on('click', function() {        var $t = $(this);        $t.removeClass('show');        $hNuBtn.parent().removeClass('active');    });   //点击子元素，关闭header的选中active效果    $('.h-nu-box .itemli').off('click').on('click', function() {        $hNuBtn.parent().removeClass('active');    });       $('.applicjob').off('click').on('click', function() {        ajax_handle_message('敬请期待');    });};$(function() {    activeSideBarFixed();    hNuToggle();     //锚点定位栏目，用的是bootstrapjs的功能，target对应ul的包围box即可    $('body').scrollspy({        target: '#eventDetailNavMain'    });})