Superfish menú
Superfish es un plugin jQuery que contiene un menú desplegable muy atractivo y limpio de ver tanto a nivel de código como a visualización de los resultados.
Se trata de un menú horizontal que presente unos items de menú iniciales a la vista y que puedes incluir otras listas dentro de una de estas para que al pasar el ratón por encima de dicho item, se desplege esta segunda lista no visible.
El plugin y ejemplo te lo puedes descargar de aquí.
Disponer del plugin en nuestra página Web es muy sencillo. Tan solo debes incluir dentro de tu cabecera o <head> los siguientes estilos y scripts que ya vienen en el paquete de descarga.
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
Y luego en nuestro cuerpo o <body> añadimos donde queramos las listas que representarán el menú.
En el caso del ejemplo añadimos lo siguiente:
<ul class="sf-menu"> <li class="current"> <a href="#a">menu item</a> <ul> <li> <a href="#aa">menu item that is quite long</a> </li> <li> <a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#aba">menu item</a></li> <li><a href="#abb">menu item</a></li> <li><a href="#abc">menu item</a></li> <li><a href="#abd">menu item</a></li> </ul> </li> <li> <a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li> <a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> </ul> </li> <li> <a href="#">menu item</a> </li> <li> <a href="#">menu item</a> <ul> <li> <a href="#">menu item</a> <ul> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> <li> <a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li> <a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li> <a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li> <a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> </ul> </li> <li> <a href="#">menu item</a> </li> </ul>
Este código HTML estático se puede convertir en dinámico muy fácilmente añadiendo por ejemplo las categorías de tu Web, entre otros.
Más fácil aún es cambiarle es aspecto al menú, simplemente editando el archivo «superfish.css» a tu antojo.
Autor
¿Buscas trabajo de programador?
4 respuestas a “Superfish menú”
Deja una respuesta
33 artículos que te podrían interesar
Ver más sobre
[…] sin maquetación. Para maquetarlo puedes hacerlo como quieras. En nuestro caso vamos a utilizar el plugin superfish menu para hacerlo de forma rápida. Todos los archivos referentes a este jQuery plugin ya fueron […]
Hola ¡¡ muy buen aporte, te comento yo tengo instalado Superfish menú y cuando lo veo desde un iphone aparece una pestaña, bueno el problema que tengo es que instale una galeria de fotos jquery desaparece el menu, sabes a que se debe ?
incompatibilidad de plugins. Suele pasar
Buenas tardes Sr.Jose
Tengo implementado el menú dinámico en mi pagina web..pero cuando coloco archivos .php no resalta el menu,para saber en que posicion estoy….pero cuando coloco archivos .html si me resalta los menu..
Mi pregunta es? Como hago para que me resalten los menu .php para saber en que menu estoy
MUchas gracias