Bootstrap side navigation bar implementation method (code)

The content of this article is about the implementation method (code) of the bootstrap side navigation bar. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Preface

The responsive navigation bar that comes with bootstrap slides downwards. Sometimes it cannot meet personalized needs and needs to be made. Similar to the side-sliding menu of android drawerLayout, this is the bootstrap custom side-sliding menu I want to implement. I refer to the side-sliding menu of many official websites. The implementation methods are different, and the advantages and disadvantages are also very obvious. Some official website homepages only implement one For the side-sliding effect, I used the owl.carousel sliding screen plug-in, but I personally think it’s overkill. The more professional name of this bootstrap side sliding menu is called mobile navigation bar. I also compare this name, which is more in line with the characteristics of bootstrap. Therefore, this article introduces an easier method that is easier for novices to accept.

bootstrap side navigation bar implementation principle

1. side sliding bar positioning fixed

2. Use The bootstrap responsiveness uses the tool class visible-sm visible-xs hidden-xs hidden-sm, etc. to adapt to different screens.

3. The side-sliding effect of the side-sliding bar is not implemented using the jquery method. The css3 transforms attribute is used to move p, and the side sliding animation effect uses the css attribute transition

4. Disadvantages: Use two sets of menus, one is the menu displayed on the PC screen , one set is a mobile phone navigation menu displayed on the mobile terminal. This shortcoming is relatively obvious. It generates irrelevant labels. The advantage is less code and is simple and easy to accept.

bootstrap navigation bar layout

    <!--手机导航栏-->
    <p id="mobile-menu" class="mobile-nav visible-xs visible-sm">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">iOS</a></li>
        </ul>
    </p>
    <!--pc导航栏-->
    <nav class="navbar-inverse visible-lg visible-md" role="navigation">
        <p class="container">
            <p class="navbar-header">
                <a class="navbar-brand" href="#">菜鸟教程</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">Java</a></li>
                </ul>
            </p>
        </p>
    </nav>
    <!--手机导航栏侧滑-->
    <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>

The layout of a navigation bar uses two navigation menus, one for PC and one for mobile phone. It uses bootstrap responsive tool class visible-xs visible-sm to hide the switch button on PC; visible-lg visible -md realizes the display of the navigation bar on the PC; visible-xs visible-sm realizes the display of the mobile navigation bar on the mobile phone.

css implements layout and side-sliding effects (key css3 attributes transform and transition for side-sliding)

Not much code, only 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);} 
        /*侧滑关键*/
        .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 should be noted are the two attributes of css3:
transform: Rotate div, support 2D or 3D rotation of elements, the attribute value translateX (X) is the distance of moving Xpx on the X axis
The animation effect of side sliding is to use transition Attribute, set the effect of the transition animation of the attribute, syntax
transition: property duration timing-function delay;

Click event switches side sliding

        $("#mobile-nav-taggle").click(function () {
            var mobileMenu = $("#mobile-menu");            
            if (mobileMenu.hasClass("show-nav")) {
                setTimeout(function () {
                    mobileMenu.addClass("hide-nav").removeClass("show-nav");
                }, 100)
            }            else {
                setTimeout(function (){
                    mobileMenu.addClass("show-nav").removeClass("hide-nav");
                }, 100)
            }
        })

Summary

It is not recommended to use two menu navigation bars. The shortcomings are obvious. It is just to achieve the effect. Don't mind. In fact, it can also be achieved with one menu navigation bar. Try media and it can be achieved.

Related recommendations:

How to implement collapsible side navigation in Bootstrap

The above is the detailed content of Bootstrap side navigation bar implementation method (code). For more information, please follow other related articles on the PHP Chinese website!