Inicia sesión



Como construir un menu con Superfish

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.


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




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






Tablas En DIVs

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-14
  • Categorias: CSS3 html5 Html webmasters Noticias Tutorial

Protocolos de seguridad en redes inalambricas

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-14
  • Categorias: Encriptacion Internet Red Claves Wifi Seguridad Noticias Tutorial Informatica

Descifrar contraseñas de archivos comprimido

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-14
  • Categorias: Noticias Tutorial Encriptacion Software WinRAR

Cursos que aún ofrecen certificados gratuitos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-26
  • Categorias: Cursos Noticias Tutorial Aprendizaje

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial