Como construir un menu con Superfish

En esta ocasión en tutoriales en linea mostraremos como construir un menú sensible con HTML5, con jQuery y jаvascript. Los menús de navegación responsive, adaptativo, receptivos o sensible vienen en diferentes formas y tamaños, en este caso sera la navegación 'Superfish'. En este caso este menú no tiene el media Query en el ejemplo original de Github, por ello no veo ninguna lógica que le pongamos el CSS3, simplemente lo pusimos en este Tutoriales en linea para que el usuario vea el funcionamiento de los grandes menús entre otras cosas que mas adelante o mejor dicho en el siguiente Tutorial vamos a estudiar.

Que es Superfish

Superfish es un complemento mejorado de jQuery del menú de estilo Suckerfish que toma un menú desplegable puro de CSS existente (por lo que se degrada sin jаvascript) ademas, es el plugin de menú jQuery por Joel Birch y agrega las siguientes mejoras muy buscadas:

• Soporta dispositivos táctiles.
• El retardo programado en el mouseout para ser más tolerante con los errores de pilotaje del mouse.
• Animaciones cuando se muestran submenús.
• Accesibilidad del teclado.
• Soporta el plugin hoverIntent.
• Indica la presencia de submenús agregando flechas basadas en CSS a los anclajes relevantes.
• Puede mostrar la ruta a su página actual mientras el menú está inactivo.
• Funciones opcionales de devolución de llamada.
• Proporciona métodos públicos hide y show que puede llamar a los elementos de la lista que tienen submenú hijos.

Guía de inicio rápido

Comience con un menú desplegable de CSS puro basado en listas anidadas no ordenadas. Para cada selector li: hover en su CSS, agregue un selector li.sfHover equivalente. Se utiliza para ocultar submenús. Para facilitar este paso, hay archivos CSS de varios navegadores para una variedad de tipos de menú incluidos en la descarga de Superfish.display:none

<link href="megafish.css" rel="stylesheet" media="screen">

Enlace al archivo superfish.js (después de incluir jQuery) usando una etiqueta de script en el encabezado de su documento.

<script src="jQuery.js"></script>
<script src="superfish.js"></script>
<script src="hoverIntent.js"></script>

Llama superfish()al elemento ul que contiene.

<script>
  jQuery(document).ready(function() {
    jQuery('ul.sf-menu').superfish();
  });
</script>

Hay muchas opciones disponibles para personalizar su menú. Ver resultado de este Tutoriales En Linea.