Crear un menú de navegación inteligente y receptivo con este complemento de jQuery
Cada sitio moderno necesita un diseño receptivo y una navegación utilizable . Eso es un hecho.
Pero, los menús de hamburguesas solo pueden llegar tan lejos y cambian radicalmente la usabilidad para diferentes tamaños de pantalla. La mejor forma de manejar esto es mediante la ocultación progresiva de enlaces con un complemento como OkayNav .
Este plugin de jQuery gratuito agrega una característica de menú muy simple a cualquier página y oculta muy poco los elementos de navegación , en función de diferentes ventanas gráficas. De esta forma, los usuarios de teléfonos inteligentes tienen el menú de hamburguesas individual, pero los usuarios de tabletas también pueden ver algunos enlaces.
Por defecto, se basa en un
elemento y una larga lista desordenada . Hasta ahora, no creo que este complemento sea compatible con los menús desplegables de varios niveles, pero si conoces un poco de jQuery, puedes agregarlo tú mismo.OkayNav es extremadamente simple y está diseñado para sitios web más simples que solo tienen un puñado de enlaces de navegación. Estos enlaces se ocultan lentamente detrás de un menú fuera de la pantalla una vez que tocan una determinada ventana gráfica y más enlaces se ocultan cuanto más pequeño es el navegador.
Tendrá que ajustar su lista desordenada en un elemento de navegación y darle una identificación específica. Luego, puede orientar todo el okayNav()
con la función okayNav()
como esta:
var navigation = $ ('# nav-main'). okayNav (); Tenga en cuenta que esta es la configuración más simple sin características personalizadas. Puede trabajar con más de una docena de opciones personalizadas integradas en esta biblioteca para controlar el estilo del icono, 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 abrir la navegación :
navigation.okayNav ('openInvisibleNav'); Todos estos códigos están bien documentados en el repositorio de GitHub, que también incluye una descarga del guión. Si prefiere la ruta CDN, también puede usar el enlace RawGit para agregar esta secuencia de comandos directamente desde GitHub.
OkayNav es ideal para sitios más pequeños que se benefician de la técnica de navegación progresiva. Pero, si todavía no está seguro de cómo funciona esto, revise esta demostración en CodePen que muestra lo que este pequeño complemento puede hacer.
30 kits gratuitos de interfaz de usuario web y móvil para su colección
Desarrollar un nuevo proyecto de diseño web desde cero es un desafío, y es por eso que los diseñadores como usted y yo adoramos los kits de UI gratuitos. Estos recursos pueden ayudarnos significativamente en nuestro trabajo para ahorrar tiempo y hacer un trabajo mucho más rápido. Los kits de UI también son una excelente manera de explorar ideas, obtener información sobre las mentes de otros diseñadores, así como para detectar nuevas tendencias.Le dimos
(Consejos de tecnología y diseño)
15 parques infantiles Funtastic que deseabas cuando eras un niño
¿Te acuerdas de cuando eras joven y te encantaba colgar de las barras de mono, jugar con la arena y dar saltos atrevidos en los columpios? Los parques infantiles son lugares increíbles donde un niño (o un niño grande) puede ensuciarse y experimentar las alegrías de ser joven y libre.Aquí, he reunido una selección de 15 áreas de juego creativamente diseñadas de todo el mundo . Con tim
(Consejos de tecnología y diseño)