Apycon, es un sitio que te ofrece una galería fantástica de 84 menús de diferentes estilos hechos con jQuery.
Para descargar, solo selecciona alguno de ellos:
Eliges el tipo del color del menú, lo descargas y listo:
Una vez descargado, extrae el contenido del zip claro! si deseas instalarlo, y aloja las partes de las imágenes que conforman al menú y las colocas(url) en sus respectivos lugares del archivo CSS:
menú.css
Ya que tienes listo el archivo, junto con los otros dos vas al video tutorial de Ciudad blogger para que te explique como alojarlos en Dropbox:
menú.jsjquery.js
Una vez alojados, coloca las direcciones(url) en sus respectivos lugares del siguiente código:
<link type="text/css" href="menu.css" rel="stylesheet"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="menu.js"></script>
Ahora vas a tu plantilla e insertas el código anterior antes de la etiqueta </head>.
Y por ultimo, solo incluye el siguiente código como elemento HTML/Javascript o si deseas, lo puedes colocar dentro de la misma plantilla:
<div id="menu"> <ul class="menu"> <li><a href="#" class="parent"><span>Home</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1.1</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.1.1</span></a></li> <li><a href="#"><span>Sub Item 1.1.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Sub Item 1.2</span></a></li> <li><a href="#"><span>Sub Item 1.3</span></a></li> <li><a href="#"><span>Sub Item 1.4</span></a></li> <li><a href="#"><span>Sub Item 1.5</span></a></li> <li><a href="#"><span>Sub Item 1.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 1.7</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.7.1</span></a></li> <li><a href="#"><span>Sub Item 1.7.2</span></a></li> </ul></div> </li> </ul></div> </li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul></div> </li> <li><a href="#"><span>ProductInfo</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.1</span></a></li> <li><a href="#"><span>Sub Item 1.2</span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>Sub Item 2</span></a> <div><ul> <li><a href="#"><span>Sub Item 2.1</span></a></li> <li><a href="#"><span>Sub Item 2.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Sub Item 3</span></a></li> <li><a href="#"><span>Sub Item 4</span></a></li> <li><a href="#"><span>Sub Item 5</span></a></li> <li><a href="#"><span>Sub Item 6</span></a></li> <li><a href="#"><span>Sub Item 7</span></a></li> </ul></div> </li> <li><a href="#"><span>Help</span></a></li> <li class="last"><a href="#"><span>Contacts</span></a></li> </ul> </div>
Le escribes tus propios títulos, subtítulos y direcciones. También le podrás agregar o quitar partes del menú, dependiendo de la estructura que tu elijas.
Recuerda que este es un ejemplo en general que conforman los menús de Apycon.
