Global
Argentina
Chile
Colombia
España
México
Perú
Uruguay
Venezuela
Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky
Ver más- 17,224 Miembros
- 12,970 Temas
- 4,976 Seguidores
[Aporte] Menu desplegable vertical para bootstrap + yapas
Para los que apestamos diseñando webs, twitter bootstrap es de lo mejor que nos pudo pasar. Sin embargo siempre se pueden mejorar y agregar cosas. Algo que me llamó la atención que le falte al proyecto es un menú vertical desplegable como usan muchas grandes webs (amazon y ebay entre otras).El código para lograrlo es bastante sencillo, voy a tomar como referencia el ejemplo base de bootstrap y el código necesario para llevar a cabo la tarea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link rel='stylesheet' href='http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.min.css' media='screen'>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
a.menu:after, .dropdown-toggle:after {
content: none;
}
ul.nav li.dropdown:hover {
font-weight: bold;
}
ul.nav li.dropdown:hover ul.dropdown-menu.submenu{
display: block;
margin-left: 220px;
margin-top: -36px;
background-color:#FFF;
font-weight: normal;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div id="zona-navegacion" class="span3 sidebar-nav">
<ul id="menuLateral" class="nav nav-tabs nav-stacked">
<li class="dropdown"><a class="dropdown-toggle" href="#menu1">Menu 1</a>
<ul class="dropdown-menu submenu">
<li><a href="#menu1.1">Menu 1.1</a></li>
<li><a href="#menu1.2">Menu 1.2</a></li>
<li><a href="#menu1.3">Menu 1.3</a></li>
<li><a href="#menu1.4">Menu 1.4</a></li>
<li><a href="#menu1.5">Menu 1.5</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" href="#menu2">Menu 2</a>
<ul class="dropdown-menu submenu">
<li><a href="#menu2.1">Menu 2.1</a></li>
<li><a href="#menu2.2">Menu 2.2</a></li>
<li><a href="#menu2.3">Menu 2.3</a></li>
<li><a href="#menu2.4">Menu 2.4</a></li>
<li><a href="#menu2.5">Menu 2.5</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" href="#menu3">Menu 3</a>
<ul class="dropdown-menu submenu">
<li><a href="#menu3.1">Menu 3.1</a></li>
<li><a href="#menu3.2">Menu 3.2</a></li>
<li><a href="#menu3.3">Menu 3.3</a></li>
<li><a href="#menu3.4">Menu 3.4</a></li>
<li><a href="#menu3.5">Menu 3.5</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" href="#menu4">Menu 4</a>
<ul class="dropdown-menu submenu">
<li><a href="#menu4.1">Menu 4.1</a></li>
<li><a href="#menu4.2">Menu 4.2</a></li>
<li><a href="#menu4.3">Menu 4.3</a></li>
<li><a href="#menu4.4">Menu 4.4</a></li>
<li><a href="#menu4.5">Menu 4.5</a></li>
</ul>
</li>
</ul>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<script type="text/javascript">
$('li a').click(function(){
var $this= $(this);
console.log('click en ' + $this.html());
})
</script>
</body>
</html>
Vean que el único código que agregué es el markup necesario del menú (es decir, todo lo contenido en
<div id="zona-navegacion" class="span3 sidebar-nav">
) y luego el css necesario para llevar a cabo la tarea
a.menu:after, .dropdown-toggle:after {
content: none;
}
ul.nav li.dropdown:hover {
font-weight: bold;
}
ul.nav li.dropdown:hover ul.dropdown-menu.submenu{
display: block;
margin-left: 220px;
margin-top: -36px;
background-color:#FFF;
font-weight: normal;
}
En ese caso el uso de 220px y -36px se corresponden con el ancho y largo de los elementos de mi menú, estos valores deberían ser modificados para adecuarse al tamaño del menú que usemos.
Luego hay un pequeño script que muestra por consola en que elemento del menú se hace click (no es necesario para nada). Los usuarios de internet explorer deberían sacarlo ya que suele traer problemas el uso de console.log
Las yapas vienen del mismo código, les recomiendo entrar en http://www.bootstrapcdn.com/ es un cdn que aloja las distintas versiones de bootstrap que nos permite ahorrar ancho de banda y acelerar la carga en nuestra página.
El otro es cdnjs.com, es un cdn que almacena muchas de las librerías javascript de uso común en servidores cloudflare y también nos permiten una aceleración importante de la carga de nuestra página además del ahorro de ancho de banda.
El ejemplo se puede ver online en http://ejemplos.desarrolladorweb.net/bootstrap_menu.html
- 7Calificación
- 2Seguidores
- 2.956Visitas
- 9Favoritos
8 comentarios
ni idea, uso ubuntu, por lo tanto no tengo dreamweaver
Es para hacer un agregado a bootstrap,aparte lo único que hay que hacer para que funcione es el usar el css que puse
a.menu:after, .dropdown-toggle:after {
content: none;
}
ul.nav li.dropdown:hover {
font-weight: bold;
}
ul.nav li.dropdown:hover ul.dropdown-menu.submenu{
display: block;
margin-left: 220px;
margin-top: -36px;
background-color:#FFF;
font-weight: normal;
}
está genial
(tengo un problema con el menu colapasado de bootstrap, se aceptan ayudas)
http://www.taringa.net/comunidades/webdesign/5704259/_ayuda_-Problema-con-el-menu-mobile-de-bootstrap.html
@pol7777 esto es simplemente una especie de widget para este tipo de menus. Boilerplate es un conjunto de cosas (incluídas prácticas) para desarrollar aplicaciones html5. Saludos