"side menu"
Bootstrap 3.3.0 Snippet by computocell

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrap"> <div class="nav-bar navbar-inverse" role="navigation"> <div id ="top-menu" class="container-fluid active"> <a class="navbar-brand" href="#">Brand</a> <ul class="nav navbar-nav"> <form id="qform" class="navbar-form pull-left" role="search"> <input type="text" class="form-control" placeholder="Search" /> </form> <li class="dropdown movable"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="fa fa-4x fa-child"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#"><span class="fa fa-user"></span>My Profile</a></li> <li><a href="#"><span class="fa fa-gear"></span>Settings</a></li> <li class="divider"></li> <li><a href="#"><span class="fa fa-power-off"></span>Logout</a></li> </ul> </li> </ul> </div> </div> <aside id="side-menu" class="aside" role="navigation"> <ul class="nav nav-list accordion"> <li class="nav-header"> <div class="link"><i class="fa fa-lg fa-globe"></i>Portal<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Dashboard</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Administration</a></li> </ul> </li> <li class="nav-header"> <div class="link"><i class="fa fa-lg fa-users"></i>Users<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Users</a></li> <li><a href="#">New User</a></li> </ul> </li> <li class="nav-header"> <div class="link"><i class="fa fa-cloud"></i>Sites<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Search Sites</a></li> <li><a href="#">New Site</a></li> <li><a href="#">Jobs</a></li> </ul> </li> <li class="nav-header"> <div class="link"><i class="fa fa-lg fa-map-marker"></i>Zones<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Search Zones</a></li> <li><a href="#">New Zone</a></li> </ul> </li> <li class="nav-header"> <div class="link"><i class="fa fa-lg fa-file-image-o"></i>Reports<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Entries</a></li> <li><a href="#">Redirects</a></li> <li><a href="#">Pingbacks</a></li> <li><a href="#">Tags</a></li> </ul> </li> </ul> </aside> <!--Body content--> <div class="content"> <div class="top-bar"> <a href="#menu" class="side-menu-link burger"> <span class='burger_inside' id='bgrOne'></span> <span class='burger_inside' id='bgrTwo'></span> <span class='burger_inside' id='bgrThree'></span> </a> </div> <div class="content-inner"> <h2>Sample</h2> <h3>A responsive Top and Side Menu, resize your browser to find out</h3> </div> </div> </div>
.wrap { position: relative; } .wrap .nav-bar .navbar-brand { margin-top: 15px; } .wrap .nav-bar .navbar-form { margin-top: 25px; } .wrap .nav-bar .nav { float: right !important; } .wrap .nav-bar .nav .dropdown span.fa, .wrap .nav-bar .nav .dropdown span.caret { margin-right: 10px; } .wrap .nav-bar .nav .dropdown-menu { background: #222; left: auto; width: 200px; right: 0; } .wrap .nav-bar .nav .dropdown-menu > li > a { color: #ddd; padding: 8px; } .wrap .nav-bar .nav .dropdown-menu > li > a:hover { background: #3355ff; } .wrap .side-menu-link { left: 21em; } .wrap .burger { position: relative; width: 35px; height: 30px; left: 10px; top: 5px; z-index: 500000; } .wrap .burger .burger_inside { position: absolute; background-color: #222; width: 30px; height: 5px; left: 2.5px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .wrap .burger #bgrOne { top: 0; } .wrap .burger #bgrTwo { top: 10px; } .wrap .burger #bgrThree { top: 20px; } .wrap #side-menu { position: absolute; z-index: -1; background: #404040; width: 22em; padding-top: 40px; padding-right: 20px; padding-left: 10px; float: left; display: block; left: 0; height: 900px; } .wrap .content { position: absolute; right: 0; min-width: 400px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .wrap .content .top-bar { height: 40px; background: #ddd; } .wrap .content .content-inner { padding: 0; margin: 0; background: #fff; padding-left: 20px; display: block; position: absolute; height: 900px; width: 100%; } .wrap ul.accordion { width: 100%; background: transparent; } .wrap ul.accordion .link { cursor: pointer; display: block; padding: 15px 15px 15px 42px; color: #9D9D9D; font-size: 14px; font-weight: 700; border-bottom: 1px solid #303030; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .wrap ul.accordion li:not(open) last-child .link { border-bottom: 0; } .wrap ul.accordion li i { position: absolute; top: 16px; left: 12px; font-size: 18px; color: #999; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .wrap ul.accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .wrap ul.accordion li.open .link { color: #FFB266; } .wrap ul.accordion li.open i { color: #FFB266; } .wrap ul.accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .wrap ul.accordion ul.submenu { display: none; background: transparent; font-size: 14px; padding: 0; } .wrap ul.accordion ul.submenu li { border-bottom: 1px solid #4b4a5e; list-style: none; } .wrap ul.accordion ul.submenu li a { display: block; text-decoration: none; color: #d9d9d9; padding: 12px; padding-left: 42px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrap ul.accordion ul.submenu li a:hover { background: rgba(240, 128, 128, 0.8); color: #ffb266; } @media screen and (max-width: 768px) { .wrap .nav-bar .navbar-brand { margin-top: 0; padding-left: 0; } .wrap .side-menu-link { display: inline-block; } .wrap #side-menu #qform { position: absolute; top: 10px; } .wrap .content { left: 0; } .wrap.active .content { left: 21em; } .wrap.active .content #bgrOne { top: 10px; transform: rotate(225deg); } .wrap.active .content #bgrTwo { opacity: 0; } .wrap.active .content #bgrThree { top: 10px; transform: rotate(315deg); } } @media screen and (min-width: 769px) { .side-menu-link { display: none; } .wrap { position: relative; } .wrap .content { left: 21em; right: 0; } }
$(function() { var accordionActive = false; $(window).on('resize', function() { var windowWidth = $(window).width(); var $topMenu = $('#top-menu'); var $sideMenu = $('#side-menu'); if (windowWidth < 768) { if ($topMenu.hasClass("active")) { $topMenu.removeClass("active"); $sideMenu.addClass("active"); var $ddl = $('#top-menu .movable.dropdown'); $ddl.detach(); $ddl.removeClass('dropdown'); $ddl.addClass('nav-header'); $ddl.find('.dropdown-toggle').removeClass('dropdown-toggle').addClass('link'); $ddl.find('.dropdown-menu').removeClass('dropdown-menu').addClass('submenu'); $ddl.prependTo($sideMenu.find('.accordion')); $('#top-menu #qform').detach().removeClass('navbar-form').prependTo($sideMenu); if (!accordionActive) { var Accordion2 = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; // Variables privadas var links = this.el.find('.movable .link'); // Evento links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown); } Accordion2.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.movable .submenu').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion2($('ul.accordion'), false); accordionActive = true; } } } else { if ($sideMenu.hasClass("active")) { $sideMenu.removeClass('active'); $topMenu.addClass('active'); var $ddl = $('#side-menu .movable.nav-header'); $ddl.detach(); $ddl.removeClass('nav-header'); $ddl.addClass('dropdown'); $ddl.find('.link').removeClass('link').addClass('dropdown-toggle'); $ddl.find('.submenu').removeClass('submenu').addClass('dropdown-menu'); $('#side-menu #qform').detach().addClass('navbar-form').appendTo($topMenu.find('.nav')); $ddl.appendTo($topMenu.find('.nav')); } } }); /**/ var $menulink = $('.side-menu-link'), $wrap = $('.wrap'); $menulink.click(function() { $menulink.toggleClass('active'); $wrap.toggleClass('active'); return false; }); /*Accordion*/ var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; // Variables privadas var links = this.el.find('.link'); // Evento links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown); } Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion($('ul.accordion'), false); });

Related: See More


Questions / Comments: