You are here

Menu desplegable con Twitter Bootstrap

BlogUneWeb

Como crear una barra de menú responsive con bootstrap

Uno de los componentes más usados en los diseños responsive son los ménus. Tengo que admitir que hacía rato que no los llamaba de esa forma, desde que mi hermana me comento la graciosa forma de llamarlos en su trabajo: La hamburguesita. La explicación se ven de forma normal en dispositivos de escritorio, y al verlos desde un dispositivo mobile desaparecen completamente, dejando un icono simil a una hamburguesa en el cual al hacer click/touch despliegan el listado de los items.

El primer paso para desarrollarlos es inclurír jquery y la librería bootstrap en el header de tu html:

<link href="/css/bootstrap.css" rel="stylesheet" >


<script src="/js/jquery.min.js"></script>






<script src="/js/bootstrap.min.js"></script>
Lo siguiente es crear la estructura html que incluya los items del menú:

<nav class="navbar navbar-inverse">

      <div class="container">


        <!--  Botón para abrir el menú en mobile(hamburguesita) -->

<div class="navbar-header">


    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#items_de_navbar">

<span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>


          <a class="navbar-brand" href="#">Nombre Web</a>

<span class="icon-bar"></span>
          </button>
    <!-- Nombre y/o Logo de la web -->
        </div>

        <!-- Listado de iconos del menú -->


            <li class="active"><a href="#">Home</a></li>

<div class="collapse navbar-collapse" id="items_de_navbar">
          <ul class="nav navbar-nav">
   <!-- Con la clase active, el item va a ser el activo de la pagina actual -->
            <li><a href="#">Link1</a></li>


</nav>

<li><a href="#">Link2</a></li>
          </ul>
        </div>
  <!-- /.navbar-collapse -->
      </div>


   <!-- /.container -->
¡Y eso es todo! Bootstrap se va a encargar de que si el tamaño de la pantalla es mobile se oculten los iconos y se vea el icono para desplegarlos.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts