Posted By

Aguayoapps on 04/30/15


Tagged

menu structure bootstrap


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

JeffSFO


Menu structure - bootstrap


 / Published in: HTML
 

General structure of the menu

  1. <meta charset="utf-8">
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  5. <link rel="stylesheet" type="text/css" href="css/styles.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  7. <script src="js/modernizer.custom.js"></script>
  8. <script src="js/bootstrap.min.js"></script>
  9. <title>Plantilla menu</title>
  10. </head>
  11. <header>
  12. <div class="container">
  13. <div class="container-inner">
  14. <nav class="navbar navbar-inverse navbar-fixed-top">
  15. <div class="container">
  16. <div class="navbar-header">
  17. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  18. <span class="sr-only">Toggle navigation</span>
  19. <span class="icon-bar"></span>
  20. <span class="icon-bar"></span>
  21. <span class="icon-bar"></span>
  22. </button>
  23. <a class="navbar-brand" href="#">Logo</a>
  24. </div>
  25. <div id="navbar" class="navbar-collapse collapse">
  26. <ul class="nav navbar-nav">
  27. <li class="active"><a href="#">Inicio</a></li>
  28. <li><a href="#about">Acerca de Nosotros</a></li>
  29. <li><a href="#contact">Contact</a></li>
  30. <li class="dropdown">
  31. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Desplegable<span class="caret"></span></a>
  32. <ul class="dropdown-menu" role="menu">
  33. <li><a href="#">Action</a></li>
  34. <li><a href="#">Another action</a></li>
  35. <li><a href="#">Something else here</a></li>
  36. <li class="divider"></li>
  37. <li class="dropdown-header">Nav header</li>
  38. <li><a href="#">Separated link</a></li>
  39. <li><a href="#">One more separated link</a></li>
  40. </ul>
  41. </li>
  42. </ul>
  43. </div><!--/.nav-collapse -->
  44. </div>
  45. </nav>
  46. </div>
  47. </div>
  48. </header>
  49. </body>
  50. </html>

Report this snippet  

You need to login to post a comment.