Inicia sesión


Como construir un menu con SuperfishEn 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.

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-05-28
  • Categorias: Diseño Web html5 javascript jQuery WebSite webmasters Noticias Tutorial

Como construir un menu con Superfish Como construir un menu con Superfish...
Tutoriales en linea
¿Te gusta el tutorial?




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo jugar Ajedrez Online TL

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-18
  • Categorias: WebSite Juegos Noticias Tutorial

Cómo encontrar un teléfono Android perdido

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-17
  • Categorias: Android Telefonia Smartphone Tablet Tutorial

Configura tu servidor VPN en Windows

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-15
  • Categorias: Windows Internet Red Wifi Seguridad Noticias Tutorial

Como crear una web con el lenguaje HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 Html WebSite webmasters Cursos Noticias Tutorial

Introducción Al Lenguaje JS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial