Cree un menú de navegación más inteligente con este complemento jQuery
Todo sitio moderno necesita una Disposición Responsive y un navegación utilizable. Eso es un hecho.
Pero, los menús de hamburguesas solo pueden llegar muy lejos y cambiar radicalmente la usabilidad para diferentes tamaños de pantalla. La mejor manera de manejar esto es por escondiendo progresivamente enlaces con un plugin como Oknav.
Este plugin gratuito de jQuery Agrega una función de menú muy simple. a cualquier pagina y esoculta los elementos de navegación, basado en diferentes vistas. De esta manera, los usuarios de teléfonos inteligentes tienen el único menú de hamburguesas, pero los usuarios de tabletas también pueden ver algunos enlaces.
Por defecto, se basa en un elemento y un lista desordenada larga. Hasta ahora, no creo que este complemento sea compatible con menús desplegables de varios niveles, pero si conoce un poco de jQuery, puede agregarlo usted mismo..
OkayNav es extremadamente simple y es destinado a sitios web más simples Que solo tienen un puñado de enlaces de navegación. Estos enlaces esconderse lentamente detrás de un menú fuera de la pantalla una vez que llegan a un cierto viewport y más enlaces siguen escondiéndose cuanto más pequeño se vuelve el navegador.
Necesitarás envuelve tu lista desordenada en un elemento de navegación y dale un ID específico. Entonces tú puedes apuntar a toda la navegación con el okaynav () funciona así:
var navigation = $ ('# nav-main'). okayNav (); Tenga en cuenta que esto es sólo el configuración más sencilla Sin características personalizadas. Puedes trabajar con más de una docena de opciones personalizadas integrado en esta biblioteca para controlar el estilo de los iconos, la animación del menú, el soporte de deslizamiento y las funciones de devolución de llamada.
Y, incluso puede llamar al menú para abrir / cerrar a voluntad pasando valores específicos a la función. Aquí hay un ejemplo simple para abre la navegación:
navigation.okayNav ('openInvisibleNav'); Todos estos códigos están bien documentados en el GitHub repo que también incluye una descarga del script. Si prefieres la ruta CDN también puedes usar el Enlace RawGit para agregar este script directamente desde GitHub.
Okaynav es ideal para sitios más pequeños Que se benefician de la progresiva técnica de navegación. Pero, si aún no está seguro de cómo funciona esto, vea esta demostración en CodePen que muestra lo que puede hacer este pequeño complemento..
