BOOTSTRAP COMPONENTES - MENUS DESPLEGABLES

En esta sesión detallamos el uso y configuración de menús desplegables con Bootstrap.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Utilizan el componente JavaScript "dropdown" para la interactividad, aunque en pocos casos será necesario escribir JS propio para utilizarlos.

Características configurables:
Alineación
Encabezados (grupos)
Divisores
Opciones deshabilitadas

Bootstrap 3 no soporta directamente desplegables anidados, por diseño: los menús anidados no son fáciles (o mejor dicho, muy difíciles) de usar en móviles


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Las 3 etiquetas anteriores deben ir en primer lugar en el bloque head -->
<title>Ejemplo de menú desplegable en Bootstrap</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim y Respond.js se agregan para mejorar soporte a IE8 -->
<!-- NOTA: Respond.js no funciona si se ve la página localmente con file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* clase local para visualizar mejor bloques de ejemplo */
.bs-example {
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 15px;
}
</style>
</head>
<body>
<!-- podemos usar la clase "container" (ancho fijo) o "container-fluid" (ancho completo) -->
<div class="container">
<!-- utilizamos un contenedor con la clase "dropdown" (aunque también podríamos usar "dropup")
si queremos que el menú se despliegue hacia arriba en vez de hacia abajo. Tanto el
botón o elemento que desencadene el despliegue del menú como éste deben estar dentro
del mismo contenedor -->
<div class="bs-example">
<h1>Menú desplegable hacia abajo</h1>
<div class="dropdown">
<!-- Con la clase "dropdown-toggle" indicamos que este botón controla un menú desplegable.
También debemos incluir la propiedad data-toggle="dropdown" -->
<button class="btn btn-default dropdown-toggle" type="button" id="btn-menu-1"
data-toggle="dropdown" aria-expanded="true">
Menú Desplegable
<span class="caret"></span> <!-- para hacer evidente que se accionará un desplegable -->
</button>
<!-- A continuación definimos las opciones del menú como una lista. Debemos asignar la propiedad
role="menu" para mantener la semántica, y la clase "dropdown-menu" para visualización.
Atención a las propiedades de accesibilidad que relacionan el menú con el botón que
lo acciona. -->
<ul class="dropdown-menu" role="menu" aria-labelledby="btn-menu-1">
<!-- Cada elemento de la lista de menú tiene el rol de "presentation", y cada enlace
de acción se le asigna el rol "menuitem". Usamos "tabindex" para que las opciones
del menú tengan prioridad si se utiliza la tecla "Tab" para navegar con el teclado
(útil para mejorar la accesibilidad) -->
<li role="presentation" class="dropdown-header">Grupo 1</li> <!-- encabezado opcional -->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Acción</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Otra acción</a></li>
<li role="presentation" class="divider"></li> <!-- división entre grupos u opciones -->
<li role="presentation" class="dropdown-header">Grupo 2</li> <!-- encabezado opcional -->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Una más</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Otra</a></li>
<!-- Si queremos deshabilitar una opción basta agregar la clase "disabled" al elemento
de la lista correspondiente. -->
<li role="presentation" class="disabled">
<a role="menuitem" tabindex="-1" href="#">Opción deshabilitada</a>
</li>
</ul>
</div>
</div>
<div class="bs-example">
<h1>Menú desplegable hacia arriba, alineado a la derecha</h1>
<!-- cambiamos clase "dropdown" del contenedor por "dropup" -->
<div class="dropup">
<!-- Para alinear el botón a la derecha, agregamos la clase "pull-right" -->
<button class="btn btn-default dropdown-toggle pull-right" type="button" id="btn-menu-2"
data-toggle="dropdown" aria-expanded="true">
Menú Desplegable 2
<span class="caret"></span> <!-- para hacer evidente que se accionará un desplegable -->
</button>
<!-- En la lista, agregamos "dropdown-menu-right -->
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="btn-menu-2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Acción</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Otra acción</a></li>
</ul>
</div>
<!-- Ya que antes usamos la apilación (a la derecha) con "pull-right", finalizamos con
"clearfix" para forzar una "nueva línea" -->
<div class="clearfix"></div>
</div>
</div>
<!-- jQuery (necesario para utilizar plugins JS de Bootstrap) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Acá utilizamos la versión precompilada y optimizada,
pero pueden incluirse otras versiones o componentes individuales -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.