A jquery-based side bar navigation

Before you introduced a lot of navigation menu, today to share a jquery-based side bar navigation. The navigation side slides out to fit on a mobile page or WebApp. A look at the realization of:

Online preview Source Download

The implemented code.

HTML code:

<Divstyle= "position:relative; overflow:hidden;">        <Divclass= "Top">            <imgsrc= "Menu.png"Height= "+"class= "Menu_btn"Align= "Left" />            <Fontstyle= "padding-left:10px;">Material Design Animation</Font>        </Div>        <DivID= "Grey_back">            &nbsp;</Div>        <DivID= "Menu_smartphone"class= "Menu_mobile_app"Align= "Left">            <ulstyle= "overflow-y: auto;">                <Divclass= "Background_profil">                </Div>                <Divclass= "Pics_profil">                </Div>                <Divclass= "Name_profil">www.wifeo.com<Fontstyle= "font-weight:300; color: #999999;">/code</Font></Div>                <Li><ahref="#">MENU 1</a></Li>                <Li><ahref="#">MENU 2</a></Li>                <Li><ahref="#">MENU 3</a></Li>                <Li><ahref="#">MENU 4</a></Li>            </ul>        </Div>        <Divclass= "card">        </Div>        <Divclass= "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: -;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: -;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: -;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: -;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 () {            varIsmenuopen =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, reproduced please specify the original address: http://www.w2bc.com/Article/9180

A jquery-based side bar navigation