How to Slide Hover Navigation Menu Style Using Bootstrap

Bootstrap

How to Slide Hover Navigation Menu Style

Learn how to create hoverable side navigation buttons with CSS. Today, I will share an examination to imitate the conduct of the side menu, like what you’ve seen on cell phone applications, yet this instructional exercise is for the web. I will make you through each stride from organizing your format and adding swipe motions to open/close the menu, usable on both work area and cell phones.

Live Demo   Download Source Code

Index.html

<nav class="navbar navbar-default sidebar" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">About<span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a>
                                <ul class="dropdown-menu forAnimate" role="menu">
                                    <li><a href="#">Services</a></li>
                                    <li><a href="#">Team</a></li>
                                    
                                </ul>
                            </li>
                            <li><a href="#">Blog<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>
                            <li><a href="#">Tags<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
                        </ul>
                    </div>
                </div>
            </nav>

Style.css

<style>
        body,
        html {
            height: 100%;
        }
        
        nav.sidebar,
        .main {
            -webkit-transition: margin 200ms ease-out;
            -moz-transition: margin 200ms ease-out;
            -o-transition: margin 200ms ease-out;
            transition: margin 200ms ease-out;
        }
        
        .main {
            padding: 10px 10px 0 10px;
        }
        
        @media (min-width: 765px) {
            .main {
                position: absolute;
                width: calc(100% - 40px);
                margin-left: 40px;
                float: right;
            }
            nav.sidebar:hover + .main {
                margin-left: 200px;
            }
            nav.sidebar.navbar.sidebar>.container .navbar-brand,
            .navbar>.container-fluid .navbar-brand {
                margin-left: 0px;
            }
            nav.sidebar .navbar-brand,
            nav.sidebar .navbar-header {
                text-align: center;
                width: 100%;
                margin-left: 0px;
            }
            nav.sidebar a {
                padding-right: 13px;
            }
            nav.sidebar .navbar-nav > li:first-child {
                border-top: 1px #e5e5e5 solid;
            }
            nav.sidebar .navbar-nav > li {
                border-bottom: 1px #e5e5e5 solid;
            }
            nav.sidebar .navbar-nav .open .dropdown-menu {
                position: static;
                float: none;
                width: auto;
                margin-top: 0;
                background-color: transparent;
                border: 0;
                -webkit-box-shadow: none;
                box-shadow: none;
            }
            nav.sidebar .navbar-collapse,
            nav.sidebar .container-fluid {
                padding: 0 0px 0 0px;
            }
            .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
                color: #777;
            }
            nav.sidebar {
                width: 200px;
                height: 100%;
                margin-left: -160px;
                float: left;
                margin-bottom: 0px;
            }
            nav.sidebar li {
                width: 100%;
            }
            nav.sidebar:hover {
                margin-left: 0px;
            }
            .forAnimate {
                opacity: 0;
            }
        }
        
        @media (min-width: 1330px) {
            .main {
                width: calc(100% - 200px);
                margin-left: 200px;
            }
            nav.sidebar {
                margin-left: 0px;
                float: left;
            }
            nav.sidebar .forAnimate {
                opacity: 1;
            }
        }
        
        nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
        nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
            color: #CCC;
            background-color: transparent;
        }
        
        nav:hover .forAnimate {
            opacity: 1;
        }
        
        section {
            padding-left: 15px;
        }
    </style>

 

You May Also Like

About the Author: admin

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *