Bootstrap (Parte 17): Dropdowns (Botones desplegables)

Redes sociales

Bootstrap

Utilizando Bootstrap podrás añadir botones desplegables o dropdowns a tu sitio web. Un dropdown es un menú desplegable que te permitirá seleccionar un valor, de entre los valores de una lista predeterminada.

Dropdown básico

Para implementar dropdowns o botones desplegables debes de utilizar la clase .dropdown.

Para abrir el botón desplegable, tienes que emplear un enlace o botón con la clase .dropdown-toggle y el atributo data-toggle=”dropdown”.

La clase .caret añade al botón una punta de flecha hacia abajo () que indica que el botón dispone de una lista desplegable.

Por último, añade la clase .dropdown-menu a un elemento <ul> para construir la lista desplegable.

Ejemplo

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <div class="dropdown">
 <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ejemplo de Dropdown <span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 </ul>
 </div>
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Dropdown con divisores entre elementos

La clase .divider, te permitirá separar con una línea horizontal elementos del botón desplegable.

Ejemplo

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <p>La clase <strong>.divider</strong> se utiliza para separar, con una l&iacute;nea horizontal, elementos de la lista:</p>
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutoriales <span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li class="divider"></li>
 <li><a href="#">Acerca de</a></li>
 </ul>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Dropdowns con cabeceras

Puede utilizar la clase .dropdown-header para añadir cabeceras en el interior de la lista desplegable.

Ejemplo

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <p>La clase <strong>.dropdown-header</strong> es utilizada para a&ntilde;adir cabeceras en el interior de la lista desplegable:</p>
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutoriales <span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li class="dropdown-header">Cabecera 1</li>
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li class="divider"></li>
 <li class="dropdown-header">cabecera 2</li>
 <li><a href="#">About Us</a></li>
 </ul>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



 

Desactivar opciones de la lista

Para desactivar una opción de la lista usa la clase .disabled

Ejemplo

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <p>La clase <strong>.disabled</strong> se utiliza para desactivar opciones de la lista desplegable:</p>
 <div class="dropdown">
 <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">Tutoriales <span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">HTML</a></li>
 <li class="disabled"><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li class="divider"></li>
 <li><a href="#">Acerca de</a></li>
 </ul>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Alinear la lista desplegable a la derecha

Para alinear la lista desplegable a la derecha añade la clase .dropdown-menu-right al elemento con la clase .dropdown-menu

Ejemplo

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <p>A&ntilde;ade la clase <strong>.dropdown-menu-right</strong> a la clase <strong>.dropdown-menu</strong> para alinear a la derecha la lista desplegable:</p>
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Bot&oacute;n desplegable <span class="caret"></span></button>
 <ul class="dropdown-menu dropdown-menu-right">
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li class="divider"></li>
 <li><a href="#">Acerca de</a></li>
 </ul>
 </div>
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Desplegar la lista hacia arriba

Si deseas que la lista se despliegue hacia arriba en vez de hacerlo hacia abajo, cambia en el elemento <div> con la clase class=”dropdown” por  class=”dropup”.

Ejemplo

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <p style="margin-top:120px">La clase <strong>.dropup</strong> hace que la lista se despliegue hacia arriba en vez de hacia abajo:</p>
 <div class="dropup">
 <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Tutoriales <span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li class="divider"></li>
 <li><a href="#">Acerca de</a></li>
 </ul>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



 

Mejorar la accesibilidad

Para ayudar a mejorar la accesibilidad de las personas que utilizan lectores de pantalla, debes incluir los atributos role y aria- *, al crear el botón desplegable.

Ejemplo

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body> 
<div class="container">
 <p>Las clases <strong>.dropdown</strong> y <strong>.dropdown-menu</strong> se utilizan para crear botones desplegables.</p> 
 <div class="dropdown">
 <button class="btn btn-danger dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutoriales <span class="caret"></span></button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Acerca de</a></li>
 </ul>
 </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Redes sociales

2 Comentarios

  1. Cristian

    Hola!

    Tengo un CMS que trabaja con bootstrap y me crea automáticamente los menús desplegables pero quiero ver la posibilidad de desactivarlos ya que si un item del menú tiene 20 sub items no queda muy bien porque el menú se despliega hasta muy abajo.
    Como puedo desactivar esa opcion de dropdown???
    Me olvidaba, el CMS está en la nube por lo que no puedo tocar codigo pero su puedo agregarle desde CSS.
    Pueden ver el ejemplo del sitio en http://www.biciup.com.ar
    Desde ya muchas gracias por la respuesta.

    Responder
  2. Jorge Lamarque (Autor del artículo)

    Sólo con el acceso a los CSS del sitio es imposible modificar el comportamiento de los menús desplegables, para ello, habría que tener acceso al código fuente de la web. Para poderlo solucionar tendrá que contactar con los desarrolladores del CMS para que le asesoren.

    Lamento no poderle ser de más ayuda.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.