<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <main class="container"> <header> <nav class="navbar-menu"> <!-- Menu normal --> <ul class="menu"> <li><a>Home</a> </li> <li><a>Menu 1</a></li> <li><a>Menu 2</a> <ul class="submenu three"> <li><a>Submenu 1</a></li> <li><a>Submenu 2</a></li> </ul> </li> <li><a>Menu 3</a></li> <li><a>About</a> <ul class="submenu five"> <li><a>Contact me</a></li> <li><a>About me</a></li> </ul> </li> </ul> <!-- Mini Menu --> <nav class="navbar-mini-menu"> <div class="menu-select"> <span class="menu-actual"> Menu </span> <span class="btn-select"> </span> </div> <ul class="mini-menu-options"> <li><a>Home</a></li> <li tabIndex="0"><a>Menu 1</a></li> <li tabIndex="0"><a>Menu 2</a> <ul class="submenu five"> <li><a>Submenu 1</a></li> <li><a>Submenu 2</a></li> </ul> </li> <li tabIndex="0"><a>Menu 3</a></li> <li tabIndex="0"><a>About</a> <ul class="submenu five"> <li><a>Contact me</a></li> <li><a>About me</a></li> </ul> </li> </ul> <!-- Fin lista mini menu --> </nav> <!-- Fin mini menu --> </nav> <!-- Fin menu general (nav) --> </header> <h1 style="margin-top:20px;" align="center">Responsive & Animated Navigation Bar Demo</h1> </main>

* { margin: 0; padding: 0; } body, html { font-family: segoe ui; font-size: 100%; height: 100%; } /* **************************************************** CONTENEDOR ******************************************************/ .container { background: url("http://subtlepatterns.com/patterns/ricepaper.png"); min-height: 100%; overflow: auto; } /* ENLACES */ a { color: #fff; cursor: pointer; display: block; padding: 1rem 1.5rem; text-decoration: none; transition: background-color .16s ease-in; } a:hover { background-color: #CD5C5C; } /* ************************************************** BARRA DE NAVEGACION Y MENU NORMAL ****************************************************/ /* Barra de navegacion (contiene al nav mini menu) */ .navbar-menu { background-color: #F08080; margin: 2% auto; max-width: 1000px; width: calc(100%); } .navbar-menu .menu { display: block; text-align: center; } .navbar-menu .menu li { display: inline-block; } .navbar-menu .menu li:hover > .submenu { display: block; -webkit-animation-name: showSubMenu; -webkit-animation-duration: .4s; } .navbar-menu .menu li ul { background-color: #f08080; display: none; position: absolute; } .navbar-menu .menu li ul li { display: block; } .navbar-menu .menu li ul li a:active { -webkit-animation-name: hideSubMenu; -webkit-animation-duration: .4s; } /****************************************************** MINI MENU ******************************************************/ /* Mini menu */ .navbar-mini-menu { background-color: #f08080; display: none; } .navbar-mini-menu .menu-select { color: #fff; padding: 1rem 1.5rem; } .navbar-mini-menu .menu-select .btn-select { background: url("icon.png") no-repeat; cursor: pointer; position: absolute; height: 30px; width: 30px; right: 10px; top: 10px; } .navbar-mini-menu .mini-menu-options { display: block; } .navbar-mini-menu .mini-menu-options li { display: block; } .navbar-mini-menu .mini-menu-options li .submenu { display: none; } .navbar-mini-menu .mini-menu-options li:focus { outline: 0; } .navbar-mini-menu .mini-menu-options li:focus > .submenu { display: block; -webkit-animation-name: showSubMenu; -webkit-animation-duration: .4s; } .navbar-mini-menu .mini-menu-options li a { display: block; padding: 1rem 1.5rem; } /* *************************************************** ANIMACIONES *****************************************************/ @-webkit-keyframes showSubMenu { 0% { transform: scale(0,0); } 100% { transform: scale(1,1); } } @-webkit-keyframes hideSubMenu { 0% { transform: scale(1,1); } 100% { transform: scale(0,0); } } /***************************************************** MEDIAQUERIES *****************************************************/ @media screen and (max-width: 750px) { /* Elimina los margenes al nav */ .navbar-menu { margin: 0; } /* Esconde el menu normal */ .navbar-menu .menu { display: none; } /* Muestra el mini menu */ .navbar-mini-menu { display: block; } /* Esconde la lista del mini menu */ .navbar-mini-menu .mini-menu-options { display: none; } }

$(document).on("ready",function() { // 0 = hide, 1 = visible var menuState = 0; //if($(".mini-menu-options").is(":hidden")) { /* Add a Click event listener to btn-select */ $(".btn-select").on("click",function() { if(menuState === 0) { $(".mini-menu-options").slideDown("slow"); menuState = 1; } else { $(".mini-menu-options").slideUp("slow"); menuState = 0; } }); //} $(".mini-menu-options li").on("click", function() { var numHijos = $(this).children().length; if(numHijos < 2) { // hide the menu $(".mini-menu-options").hide("fast"); var texto = $(this).text(); $(".menu-select .menu-actual").text(texto); } menuState = 0; }); }); var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36251023-1']); _gaq.push(['_setDomainName', 'jqueryscript.net']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();