CSS DropDown: Framework para menus desplegables

12 marzo, 2009

896

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.