Bootstrap Side navigation bar Implementation Method (code)

This article brings the content is about the bootstrap side navigation bar Implementation Method (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Objective

Bootstrap's responsive navigation bar is sliding down, sometimes not enough to meet the needs of the individual, need to do a similar to the Android Drawerlayout side-by-side menu, this is what I want to implement the bootstrap custom side-by-side menu, referring to a lot of official website of the slide, The realization method each has the difference, the advantage and disadvantage is also very obvious, some official website homepage in order to realize only a side-slip effect, uses the Owl.carousel slide screen plug-in, the individual feels the fuss. The Bootstrap slide menu is a more professional name called the Mobile navigation bar. I also compare this name, more in line with bootstrap characteristics. So this article describes an easier way for beginners to accept more easily.

Bootstrap side navigation bar implementation principle

1. Slide bar use positioning fixed

2. Use the bootstrap Responsive tool class VISIBLE-SM Visible-xs Hidden-xs hidden-sm to adapt to different screens

3. The slide-slip effect of the slide bar is not implemented using the JQuery method, using the CSS3 transforms property to move the P, and the animated effect using the CSS property transition

4. Disadvantage: The use of two sets of menus, a set of PC-side screen display menu, set is mobile display mobile navigation menu, this disadvantage is more obvious, generate irrelevant tags, the advantages of less code, easy to accept

Bootstrap navigation bar Layout

    <!--phone navigation bar--<p id= "Mobile-menu" class= "Mobile-nav visible-xs visible-sm" > <ul>            <li><a href= "#" > Home </a></li> <li><a href= "#" >Java</a></li> <li><a href= "#" >SVN</a></li> <li><a href= "#" >ios</a></li&gt        ; </ul> </p> <!--pc navigation Bar--<nav class= "Navbar-inverse visible-lg visible-md" role= "Navigation" &        Gt <p class= "Container" > <p class= "Navbar-header" > <a class= "Navbar-brand" href= "#" &                    gt; Beginner Tutorials </a> </p> <p> <ul class= "Nav navbar-nav" > <li class= "Active" ><a href= "#" >iOS</a></li> <li><a href= "#" > Svn</a></li> <li><a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown" >Jav A</a></li> </ul> </p> </p> </nav> <!--mobile navigation bar Slide--&    Gt             <p class= "nav-btn visible-xs visible-sm" > <a href= "#" class= "Mobile-nav-taggle" id= "Mobile-nav-taggle" > <span class= "Glyphicon glyphicon-align-justify" ></span> </a> </p>

A navigation bar layout, with two navigation menus, one PC-side, one is the mobile phone, using the bootstrap response to use the tool class Visible-xs VISIBLE-SM to achieve the PC-side hidden switch button; VISIBLE-LG visible-md The PC-side display navigation bar is realized, and the Visible-xs Visible-sm realizes the mobile phone navigation bar.

CSS for layout and slide-slip effects (key CSS3 Properties transform, Transition)

Not much code, just 10 lines

         * {margin:0;padding:0;}         #mobile-menu {position:fixed;top:0;left:0;         width:220px;height:100%;                  Background-color: #373737; z-index:9999;}            A:hover, A:focus{text-decoration:none}. Mobile-nav ul li a {color:gray;display:block;padding:1em 5%;        border-top:1px solid #4f4f4f;        border-bottom:1px solid #292929;        Transition:all 0.2s ease-out;        Cursor:pointer;        #mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;                Background-color: #373737; Z-index:9999;transition:all 0.3s ease-in;}}                . Mobile-nav ul li a:hover {background-color: #23A1F6; color: #ffffff;}                . Show-nav {Transform:translatex (0);}         . Hide-nav {Transform:translatex ( -220px);}        /* Slide key */. mobile-nav-taggle {height:35px;line-height:35px;        Width:35px;background-color: #23A1F6; color: #ffffff; Display:inline-block;text-align:center;cursor:pointer}. Nav.avbar-inveRse{position:relative;} . nav-btn {position:absolute;right:20px;top:20px;}

It is worth noting that the two attributes of CSS3:
Transform: Rotate Div, support element 2D or 3D rotation, attribute value Translatex (x) is the distance to move Xpx on the x axis
The animation effect of slide-slip is to use the Transition property to set the effect of the transition animation of the property, the syntax
Transition:property duration timing-function delay;

Click event Toggle Slide

        $ ("#mobile-nav-taggle"). Click (function () {            var mobilemenu = $ ("#mobile-menu");                        if (Mobilemenu.hasclass ("Show-nav")) {                setTimeout (function () {                    mobilemenu.addclass ("Hide-nav"). Removeclass ("Show-nav")                ,}, ()            }            else {                setTimeout (function () {                    Mobilemenu.addclass (" Show-nav "). Removeclass (" Hide-nav ") (                }, +)            }        )

Summarize

It is not recommended to use two menu navigation bar, the disadvantage is obvious, in order to achieve the effect, do not mind, in fact, with a menu navigation bar is also possible, try media can be fully realized.