10 fragmentos de código CSS y JavaScript para crear navegaciones receptivas

Una de las partes más complejas de un buen sitio receptivo es la navegación. Esto puede tomar un tiempo para resolverlo, y hay muchos tutoriales para ayudar con eso. Pero también soy fanático de usar fragmentos de código como los que hemos recopilado para este artículo.

Todos estos fragmentos de navegación receptivos se pueden editar y clonar de forma gratuita para sus propios proyectos. También cuentan con una variedad de estilos, por lo que habrá algo aquí que funcione para todo tipo de sitios web.

1. Diseño responsivo de página completa por Johnny Mango

Este ejemplo receptivo muestra hasta dónde puede llevar la fase de creación de prototipos de un sitio web. Notarás que la navegación tiene una función interesante cuando pasas el mouse y te enfocas automáticamente en los enlaces. Este efecto se puede modificar en un sitio web "en vivo" con la misma navegación, pero es útil en este ejemplo para mostrar la UI/UX de la página.

Vea la demostración de navegación sensible a la pluma con Kube de Johnny Mango

2. Barra de navegación desplegable por Tania Rascia

Si necesita elementos desplegables más largos en su navegación, entonces este menú podría funcionar mejor. Es una sólida alternativa a las navegaciones más básicas que solo presentan un puñado de elementos de menú. En este caso, encontrará una lista simple de enlaces con un menú desplegable muy pequeño. Los enlaces del submenú solo aparecen en un evento de clic que es manejado por jQuery. Puede cambiar eso a solo CSS, pero perderá el activador de clic.

Aún así, para un diseño tan limpio, me sorprende la versatilidad que este fragmento ofrece a los desarrolladores.

Ver la barra de navegación desplegable sensible al lápiz por Tania Rascia

3. Diseño de una sola página por Jan Czizikow

Los menús de navegación de una sola página necesitan amor como cualquier otro. Este es un ejemplo perfecto de navegación de una sola página en acción. Los enlaces se desplazan hacia abajo con una animación fluida, pero no lo dejan esperando demasiado.

Sin mencionar que automáticamente cambian de tamaño para adaptarse perfectamente, independientemente del tamaño de su navegador. Principalmente recomendaría este tipo de navegación para una página de ventas o un sitio de cartera simple. Es limpio y presenta excelentes funciones de animación junto con las técnicas de respuesta.

Ver el Pen Navegación totalmente receptiva con animaciones CSS y jQuery por Jan Czizikow

4. Menú desplegable rojo por Stephanie Walter

La desarrolladora Stephanie Walter ha creado algunos proyectos interesantes para la web. Este fragmento es solo un ejemplo que presenta una navegación receptiva de color rojo brillante.

Los enlaces tienen un poco más de dinamismo con una función personalizada seleccionada y un agradable efecto de desplazamiento para arrancar. Cuando cambie el tamaño, notará que la navegación utiliza un menú desplegable deslizante en su lugar. Casi optaría por una lista de enlaces a nivel de bloque para dispositivos móviles, pero esto funciona mucho mejor teniendo en cuenta el submenú.

Ver el multinivel de navegación Pen Responsive de Stephanie Walter

5. Diseño CSS puro por Ahmad Hjazy

Aquí hay un diseño único que usa CSS puro para la navegación. Es un menú vertical con enlaces de navegación que imitan la tabla periódica de elementos.

Los efectos de desplazamiento están un poco retrasados ​​pero sin duda son interesantes. Sin mencionar que el estilo receptivo es sorprendentemente útil. Quizás la parte más impresionante es cómo todo este ejemplo usa únicamente CSS .

Ver el menú de navegación receptivo Pen CSS por Ahmad Hjazy

6. Encabezado Adhesivo Responsivo por Marc Libunao

Mencioné el diseño de una sola página en un fragmento anterior, y este encabezado receptivo sigue una trayectoria similar. La única diferencia es que esta navegación tiene un bloque un poco más grande en la página y maneja el diseño de página receptivo de manera un poco diferente.

Cuando cambie el tamaño del navegador, notará que este ejemplo usa el ícono de hamburguesa con una animación divertida. Es bueno considerando el estilo, pero puede que no sea para todos.

Vea la navegación del encabezado fijo Pen Responsive de MarcLibunao

7. Sensible y táctil de Dragoeco

Todos los buenos sitios web deben ser compatibles con el tacto de forma predeterminada, y eso es lo que hace que esta navegación sea aún más atractiva para los diseñadores.

Cada enlace conduce a una nueva página, pero puede tocar para desplazar los menús desplegables con facilidad en cualquier dispositivo táctil. Esta función suele faltar en los menús de navegación y es una de las razones por las que los menús desplegables pueden ser complicados de diseñar.

Ver la navegación desplegable del lápiz: Sensible y táctil de Dragoeco

8. Enlaces de navegación simples por AnabolicHippo

Cuando pienso en menús de navegación simples, pienso en un diseño como este. Cada enlace aparece como su propio elemento de bloque, incluso en pantallas más pequeñas. No hay menú de hamburguesas ni función de menú animado oculto. En cambio, los enlaces cambian de tamaño y se dividen en líneas separadas.

La parte más complicada es manejar el efecto desplegable en los dispositivos móviles. Muchos de los enlaces tienen submenús y funcionarán igual en pantallas más pequeñas.

Yo diría que esto funciona mejor para sitios con pocos o ningún submenú, pero vale la pena probarlo en un dispositivo móvil para ver qué piensas de la experiencia.

Ver el menú de navegación sensible al lápiz de AnabolicHippo

9. Menú de cortina de Playstation por Louis Chenais

El desarrollador Louis Chenais creó una de mis navegaciones receptivas favoritas basada en el sitio web de PlayStation. Louis llama a esto un "menú de cortina" donde se desliza a la vista, ocupando toda la página. Esto es común para las interfaces móviles, y también se ha vuelto popular rápidamente para los diseñadores web.

Una cosa que realmente me gusta es el estilo de animación. Es lo suficientemente elegante y rápido para mostrar los enlaces sin aburrir a los usuarios. Y lo mejor de todo, parece que podría funcionar en un sitio web de producción.

Consulte el principio n.º 3 de navegación sensible al lápiz: el menú de cortina de Louis Chenais

10. Mega-menú receptivo de Samir Alley

Puede buscar en la web y encontrar cientos de mega ejemplos de menús de navegación. Por lo general, aparecen en blogs y sitios web de noticias más grandes, pero también son populares en tiendas de comercio electrónico o sitios de agencias grandes. La parte más difícil de un megamenú es hacerlo totalmente receptivo. Gracias a este pequeño fragmento, puede modificar el diseño del mega menú para que se ajuste a cualquier pantalla con facilidad.

En dispositivos móviles, utiliza una navegación deslizante para mostrar todos los enlaces internos en un menú. Esto puede parecer un poco molesto, pero también puede usar jQuery para ocultar los subenlaces si tiene sentido. Sigue siendo una de las mejores soluciones receptivas que he visto para ejecutar un mega menú en el escritorio sin alienar a los usuarios móviles.

Ver el Mega Menú Pen Responsive – Navegación por samir alley