Como crear un menu dropdown con css, un framework bueno para hacerlo sencillo…
Cuando Dreamweaver incluyó la automatización para la creación de menus dropdowns con un asistente muy intuitivo era muy cómodo realizar estos, pero agregaba ciertas librerías pesadas y algunos css un poco complicados, luego llegaron técnicas mas avanzadas para realizar estos sin necesidad de los complicados javascript de dreamweaver y que hacían la misma función.
Esta ves les traigo un framework de uso muy sencillo que ademas de fácil cuenta con algunas características que lo hacen digno de mencionar.
Free CSS Drop-Down Menú Framework es un Framework CSS para crear menús desplegables fácilmente con listas.
Su flexibilidad da la posibilidad de crear menús horizontales y verticales con submenus de diferentes combinaciones, aquí explicare como crear un menú horizontal con submenus verticales.
Características
Es Modular y totalmente configurable
Tiene Themes en CSS
Es de fácil de usar
Fácilmente de transformar a otro menú
Compatibilidad
Internet Explorer 5+
Mozilla Firefox 1.5+
Opera 7+
Safari 2+
Nota: Para IE usa la librería jQuery para su correcta funcionalidad
Primer paso
Nos descargaremos Free CSS Drop-Down Menú Framework y sera descomprimido en una carpeta local, podemos crear un archivo .html e incluir las librerías o abrir uno y copiarlo.
<link href="css/dropdown/dropdown.css" media="all" />
<link href="css/dropdown/themes/default/default.ultimate.css" />
<!--[if lt IE 7]>
<script src="js/jquery/jquery.js"></script>
<script src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
Aquí incluimos el dropdown.css que es el estilo para formar el menú y el default.ultimate.css es el theme para el menú
Segundo paso
Pondremos dentro de body una lista con class=”dropdown dropdown-horizontal”, dentro de ela podemos crear submenus y formar mas niveles de esta forma:
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="#">Home</a></li>
<li><span class="dir">About Us</span>
<!-- submenu-->
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Our Visión</a></li>
<li><span class="dir">The Team</span>
<!-- submenu de submenu-->
<ul>
<li><a href="#">Brigita</a></li>
<li><a href="#">John</a></li>
<li><a href="#">Michael</a></li>
<li><a href="#">Peter</a></li>
<li><a href="#">Sarah</a></li>
</ul>
</li>
<li><a href="#">Clients</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</li>
</ul>
Listo ahora tienes un menú desplegable fantástico.
espero les sirva.saludos.
Cuando Dreamweaver incluyó la automatización para la creación de menus dropdowns con un asistente muy intuitivo era muy cómodo realizar estos, pero agregaba ciertas librerías pesadas y algunos css un poco complicados, luego llegaron técnicas mas avanzadas para realizar estos sin necesidad de los complicados javascript de dreamweaver y que hacían la misma función.
Esta ves les traigo un framework de uso muy sencillo que ademas de fácil cuenta con algunas características que lo hacen digno de mencionar.
Free CSS Drop-Down Menú Framework es un Framework CSS para crear menús desplegables fácilmente con listas.
Su flexibilidad da la posibilidad de crear menús horizontales y verticales con submenus de diferentes combinaciones, aquí explicare como crear un menú horizontal con submenus verticales.
Características
Es Modular y totalmente configurable
Tiene Themes en CSS
Es de fácil de usar
Fácilmente de transformar a otro menú
Compatibilidad
Internet Explorer 5+
Mozilla Firefox 1.5+
Opera 7+
Safari 2+
Nota: Para IE usa la librería jQuery para su correcta funcionalidad
Primer paso
Nos descargaremos Free CSS Drop-Down Menú Framework y sera descomprimido en una carpeta local, podemos crear un archivo .html e incluir las librerías o abrir uno y copiarlo.
<link href="css/dropdown/dropdown.css" media="all" />
<link href="css/dropdown/themes/default/default.ultimate.css" />
<!--[if lt IE 7]>
<script src="js/jquery/jquery.js"></script>
<script src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
Aquí incluimos el dropdown.css que es el estilo para formar el menú y el default.ultimate.css es el theme para el menú
Segundo paso
Pondremos dentro de body una lista con class=”dropdown dropdown-horizontal”, dentro de ela podemos crear submenus y formar mas niveles de esta forma:
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="#">Home</a></li>
<li><span class="dir">About Us</span>
<!-- submenu-->
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Our Visión</a></li>
<li><span class="dir">The Team</span>
<!-- submenu de submenu-->
<ul>
<li><a href="#">Brigita</a></li>
<li><a href="#">John</a></li>
<li><a href="#">Michael</a></li>
<li><a href="#">Peter</a></li>
<li><a href="#">Sarah</a></li>
</ul>
</li>
<li><a href="#">Clients</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</li>
</ul>
Listo ahora tienes un menú desplegable fantástico.
espero les sirva.saludos.