移动端-顶部-导航

image.png

html

<!-- 顶部开始 -->
    <header>
        <div class="logo fl">
            <a href="#">
                <img src="images/logo.png" alt="">
            </a>
        </div>
      <!-- 导航图标 -->
        <div class="menu fr"></div>
    </header>
    <!-- 滑出导航 -->
    <div class="bgDiv"></div>
    <div class="rightNav">
        <a href="index.html" class="active">网站首页</a>
        <a href="javascript:;">动态简讯</a>
        <a href="javascript:;">文化研究</a>
        <a href="javascript:;">电子书库</a>
        <a href="javascript:;">文化视野</a>
        <a href="javascript:;">影音赏析</a>
        <a href="javascript:;">艺术作品</a>
        <a href="javascript:;">组织机构</a>
        <a href="javascript:;">在线留言</a>
    </div>
    <!-- 占位标签  -->
    <div class="headbox"></div>

    <!-- js 引用  -->
  <script src="js/jquery1.10.2.min.js"></script>
  <script src="js/menu.js"></script>

css

// 顶部开始
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    height: 88/@rem;
    border-bottom: 1px solid #dbdbdb;
    width: 100%;
    background-color: #f1f1f1;
    background-image: url(../images/headbg.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
header .logo {
    margin: 15/@rem 0 15/@rem 28/@rem;
}
header .logo img {
    width: 210/@rem;
    height: 58/@rem;
}
// 导航图标样式
header .menu {
    width: 37/@rem;
    height: 31/@rem;
    background-image: url(../images/menu.png);
    background-repeat: no-repeat;
    background-size: 37/@rem 31/@rem;
    margin: 28.5/@rem 28/@rem 28.5/@rem 0;
}
// 滑出导航样式
.bgDiv{
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    display: none;
    z-index: 99;
    bottom: 0;
}
.rightNav{
    width: 40%;
    max-width: 460/@rem;
    height: 100%;
    background-color: #fff;
    position: fixed;
    right: 0;
    z-index: 999;
    top: 0;
    right: -50%;
    transition: right 0.1s;
}
.rightNav a{
    display: block;
    height: 57/@rem;
    border-bottom: 2/@rem solid #f8f8f8;
    line-height: 57/@rem;
    text-align: center;
    font-size: 26/@rem;
    color: #333333;
}
.rightNav a.active {
    background-color: #fe1010;
    color: #ffffff;
}
// 占位样式
.headbox {
    width: 100%;
    height: 90/@rem;
}

menu.js

$(function () {
    // 滑出导航
    var right = $('.menu');
    var rightNav = $('.rightNav');
    var bg = $('.bgDiv');
    showNav(right, rightNav, "right");

    function showNav(btn, navDiv, direction) {
        btn.on('click', function () {
            bg.css({
                display: "block",
                transition: "opacity .5s",
                webkitTransition: "opacity .5s"
            });
            if (direction == "right") {
                navDiv.css({
                    right: "0px",
                    transition: "right 1s",
                    webkitTransition: "right 1s"
                });
            }

        });
    }
    $('a').each(function () {
        var dom = $(this);
        dom.on('click', function () {
            hideNav();
            // alert(dom.text())
        });
    });
    bg.on('click', function () {
        hideNav();
    });
    function hideNav() {
        rightNav.css({
            right: "-50%",
            transition: "right .1s",
            webkitTransition:"right .1s"
        });
        bg.css({
            display: "none",
            transition: "display 1s",
            webkitTransition:"display 1s"
        });
    }

});