A jquery-based sidebar navigation and a jquery sidebar navigation

A jquery-based sidebar navigation and a jquery sidebar navigation

I have introduced a lot of navigation menus before. Today I will share with you a jquery-based sidebar navigation. This navigation slide out is suitable for mobile web pages or webapps. A look at the implementation:

Download Online Preview source code

Implementation code.

Html code:

<div style="position: relative; overflow: hidden;">        <div class="top">                        <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 code:

  #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 Code:

  $(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;                }            });        });

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/9180

Jquery sidebar navigation link unavailable

Well, the external div contains the internal content.
Add one.
$ ('Your linked click'). click (funtion (event ){
Event. stopPropagation ();
})

Html (js, jquery) Implementation of scaling sidebar

Send it to your mailbox and run layout.html directly to see if it is the effect you want!