之前为大家介绍了好多导航菜单，今天给大家分享一款基于jquery的侧边栏导航。这款导航侧边滑出，适合放在手机网页或webapp。一看下实现的效果图：

在线预览   源码下载

实现的代码。

html代码：

<div style="position: relative; overflow: hidden;">
        <div class="top">
            <img src="menu.png" height="35" class="menu_btn" align="left" />
            <font style="padding-left: 10px;">Material design animation</font>
        </div>
        <div id="grey_back">
            &nbsp;</div>
        <div id="menu_smartphone" class="menu_mobile_app" align="left">
            <ul style="overflow-y: auto;">
                <div class="background_profil">
                </div>
                <div class="pics_profil">
                </div>
                <div class="name_profil">
                    www.wifeo.com<font style="font-weight: 300; color: #999999;">/code</font></div>
                <li><a href="#">MENU 1</a></li>
                <li><a href="#">MENU 2</a></li>
                <li><a href="#">MENU 3</a></li>
                <li><a href="#">MENU 4</a></li>
            </ul>
        </div>
        <div class="card">
        </div>
        <div class="card">
        </div>
    </div>

css代码：

  #menu_smartphone
        {
            height: 100%;
            position: absolute;
            background: #ffffff;
            top: 0;
            bottom: 0;
            left: -570px;
            width: 570px;
        }
        #menu_smartphone ul
        {
            padding: 0;
            margin: 0;
            list-style: none;
            color: #999999;
        }
        #menu_smartphone ul li
        {
            height: 70px;
            padding-left: 10px;
            line-height: 70px;
        }
        #menu_smartphone ul li:hover
        {
            background: #f7f7f7;
        }
        #menu_smartphone ul li a
        {
            color: #999999;
            text-decoration: none;
            font-family: 'Roboto';
            font-weight: 400;
            font-size: 25px;
        }
        .background_profil
        {
            background-image: url(fond.png);
            height: 240px;
        }
        .pics_profil
        {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background-size: cover;
            background-image: url(welcome.png);
            margin-top: -65px;
        }
        .name_profil
        {
            font-size: 37px;
            font-family: 'Roboto';
            font-weight: 400;
            color: #666666;
            margin-top: -50px;
            margin-left: 140px;
            margin-bottom: 40px;
        }
        .top
        {
            background-color: #e51c23;
            height: 70px;
            position: absolute;
            top: 0px;
            width: 100%;
            line-height: 70px;
            color: #ffffff;
            font-size: 20px;
            font-weight: 400;
            font-family: 'Roboto';
            padding-left: 10px;
            text-align: left;
        }
        #grey_back
        {
            display: none;
            background-color: #000000;
            opacity: 0.7;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .card
        {
            width: 90%;
            height: 300px;
            background-color: #ffffff;
            margin: 10px;
            padding: 20px;
            color: #666666;
            font-weight: 300;
            font-size: 36px;
            text-align: center;
            font-family: 'Roboto';
            box-shadow: 0 0 2px #999999;
        }
        .menu_btn
        {
            cursor: pointer;
            left: 0px;
            margin-top: 16px;
        }

js代码：

  $(document).ready(function () {
            var isMenuOpen = false;

            $('.menu_btn').click(function () {
                if (isMenuOpen == false) {
                    $("#menu_smartphone").clearQueue().animate({
                        left: '0px'
                    })
                    $("#grey_back").fadeIn('fast');
                    $(this).fadeOut(200);
                    $(".close").fadeIn(300);

                    isMenuOpen = true;
                }
            });
            $('#grey_back').click(function () {
                if (isMenuOpen == true) {
                    $("#menu_smartphone").clearQueue().animate({
                        left: '-570px'
                    })
                    $("#page").clearQueue().animate({
                        "margin-left": '0px'
                    })
                    $("#grey_back").fadeOut('fast');
                    $(this).fadeOut(200);
                    $(".menu_btn").fadeIn(300);

                    isMenuOpen = false;
                }
            });
        });

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9180

在线预览    源码下载