CSS DropDown: Framework para menus desplegables

Free CSS Drop-Down Menu Framework

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.

Recursos

También te puede interesar

One Comment

  1. kcho
    mar 18, 2011 @ 13:50:49

    no sabes como centrarlo pq yo la verdad no pude centrarlo bien ya q todo se mueve si lo haces desde el CCS