Cómo crear una navegación responsiva

Una de las partes más difíciles de ser. respondido en un sitio web es “la navegación”, Esta parte es realmente importante para la accesibilidad del sitio web, ya que es una de las formas en que los visitantes saltan sobre las páginas web..

En realidad, hay muchas formas de crear una navegación web sensible e incluso hay algunos complementos de jQuery disponibles para hacerlo en un segundo.

Sin embargo, en lugar de aplicar una solución instantánea, en este post, vamos a explicarle en Cómo construir una navegación sencilla desde el suelo. y utilizar las consultas de medios CSS3 y un poco de jQuery para mostrarlo en un tamaño de pantalla pequeño como los teléfonos inteligentes correctamente..

Así que, vamos a empezar.

Manifestación
Descargar fuente

HTML

En primer lugar, vamos a agregar la meta viewport dentro del cabeza etiqueta. Esta vista meta se requiere una etiqueta para que nuestra página se ajuste correctamente dentro de cualquier tamaño de pantalla, especialmente en la ventana móvil.

... y luego agregue el siguiente fragmento de código como la marca de navegación dentro del cuerpo etiqueta.

   Casa
 Cómo
 Iconos
 Diseño
 web 2.0
 Herramientas
 
 Menú

Como puede ver arriba, tenemos seis enlaces de menú principal y agregamos un enlace más después de ellos. Este enlace extra será usado para Halar El menú de navegación cuando está oculto en una pequeña pantalla..

Otras lecturas: No olvides la metaetiqueta de la ventana gráfica..

Estilos

En esta sección, comenzamos a diseñar la navegación. El estilo aquí es solo decorativo, puedes elegir cualquier color que desees. Pero en este caso, nosotros (yo personalmente) queremos la cuerpo Para tener un color suave y cremoso..

 cuerpo fondo-color: # ece8e5;

los nav La etiqueta que define la navegación tendrá 100% ancho completo de la ventana del navegador, mientras que ul Donde contiene nuestros enlaces del menú principal tendrá 600px por el ancho.

 nav altura: 40px; ancho: 100%; fondo: # 455868; tamaño de letra: 11 puntos; Familia tipográfica: 'PT Sans', Arial, sans-serif; font-weight: negrita; posición: relativa; borde inferior: 2 píxeles sólidos # 283744;  nav ul padding: 0; margen: 0 auto; ancho: 600px; altura: 40px;

Luego lo haremos flotador el menú se enlaza a la izquierda, por lo que se mostrarán horizontalmente uno al lado del otro, pero al flotar un elemento también se colapsará su padre.

 nav li display: inline; flotador izquierdo;

Si se nota en el marcado HTML anterior, ya hemos agregado clearfix en el clase atributo tanto para el nav y ul para despejar las cosas cuando flotamos los elementos dentro de él utilizando este hack de CSS clearfix. Entonces, agreguemos las siguientes reglas de estilo en la hoja de estilo.

 .clearfix: before, .clearfix: after content: ""; pantalla: tabla;  .clearfix: after clear: both;  .clearfix * zoom: 1;

Ya que tenemos seis enlaces de menú y también hemos especificado el contenedor para 600px, Cada enlace de menú tendrá 100px por el ancho.

 nav a color: #fff; pantalla: bloque en línea; ancho: 100px; text-align: center; texto-decoración: ninguno; línea de altura: 40px; text-shadow: 1px 1px 0px # 283744;

Los enlaces del menú se separarán con 1px borde derecho, excepto el último. Recuerde nuestro post anterior en el modelo de caja, el ancho del menú se ampliará para 1px haciendolo 101px Como la adición de la frontera, aquí cambiamos el tamaño de caja modelo para casillero con el fin de mantener el menú se mantiene 100px.

 nav li a border-right: 1px solid # 576979; tamaño de caja: caja de borde; -mano-caja de tamaño: cuadro de borde; -webkit-box-dimensionamiento: cuadro de borde;  nav li: last-child a border-right: 0;

A continuación, el menú tendrá un color más brillante cuando esté en :flotar o :activo estado.

 nav a: hover, nav a: active background-color: # 8c99a4;

... y por último, el enlace adicional se ocultará (para la pantalla del escritorio).

 nav a # pull display: none;

En este punto, solo aplicamos estilo a la navegación y no ocurrirá nada cuando redimensionemos la ventana del navegador. Entonces, saltemos al siguiente paso..

Otras lecturas: Tamaño de caja CSS3 (Hongkiat.com)

Preguntas de los medios

Las consultas de medios CSS3 se utilizan para definir cómo cambiarán los estilos en algunos puntos de ruptura determinados o específicamente en los tamaños de pantalla del dispositivo.

Dado que nuestra navegación es inicialmente 600px De ancho fijo, primero definiremos los estilos cuando se vea en 600px O menor tamaño de pantalla, por lo que prácticamente hablando., esta es nuestro primer punto de quiebre.

En este tamaño de pantalla, cada uno de los dos enlaces de menú se mostrará uno al lado del otro, por lo que ulEl ancho aquí será 100% de la ventana del navegador mientras que los enlaces del menú tendrán 50% por el ancho.

 Pantalla @media y (ancho máximo: 600 px) nav altura: auto;  nav ul ancho: 100%; bloqueo de pantalla; altura: auto;  nav li ancho: 50%; flotador izquierdo; posición: relativa;  nav li a border-bottom: 1px solid # 576979; borde derecho: 1px sólido # 576979;  nav a text-align: left; ancho: 100%; texto-sangría: 25px;

... y luego, también definimos cómo se muestra la navegación cuando la pantalla se hace más pequeña 480px o inferior (así que este es nuestro segundo punto de ruptura).

En este tamaño de pantalla, el enlace adicional que hemos agregado antes comenzará a ser visible y también le damos un enlace a “Menú” icono en su lado derecho usando el :después pseudo-elemento, mientras que los enlaces del menú principal se ocultarán para guardar más espacios verticales en la pantalla.

 Pantalla solo @media y (ancho máximo: 480 px) nav border-bottom: 0;  nav ul display: none; altura: auto;  nav a # pull display: block; color de fondo: # 283744; ancho: 100%; posición: relativa;  nav a # pull: after content: ""; fondo: url ('nav-icon.png') no-repetir; ancho: 30px; altura: 30px; pantalla: bloque en línea; posición: absoluta; derecha: 15px; superior: 10px;

Por último, cuando la pantalla se agranda por 320px y baje el menú se mostrará verticalmente de arriba a abajo.

 Pantalla solo @media y (ancho máximo: 320 px) nav li pantalla: bloque; flotar: ninguno; ancho: 100%;  nav li a border-bottom: 1px solid # 576979;

Ahora, puede intentar cambiar el tamaño de la ventana del navegador. Ahora debería ser capaz de adaptar el tamaño de la pantalla..

Otras lecturas: Consultas de medios para dispositivos estándar.

Mostrando el menú

En este punto, el menú seguirá oculto y solo estará visible cuando sea necesario tocando o haciendo clic en el botón “Menú” Enlace y podemos lograr el efecto utilizando la jQuery. slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', function (e) e.preventDefault (); menu.slideToggle ();););

Sin embargo, cuando cambia el tamaño de la ventana del navegador justo después de haber visto y escondido el menú en una pantalla pequeña, el menú permanecerá oculto, ya que pantalla: ninguna El estilo generado por jQuery todavía se adjunta en el elemento..

Por lo tanto, debemos eliminar este estilo en el cambio de tamaño de la ventana, de la siguiente manera:

 $ (window) .resize (function () var w = $ (window) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Muy bien, esos son todos los códigos que necesitamos, ahora podemos ver la navegación desde los siguientes enlaces, y le recomendamos que la pruebe en una herramienta de prueba de diseño sensible, como el Responsinator, para que pueda verla en varios anchos a la vez..

Manifestación
Descargar fuente

Bono: Una forma alternativa

Como mencionamos anteriormente en esta publicación, existen otras formas de hacerlo y usar una biblioteca de JavaScript llamada SelectNav.js Es una de las formas más fáciles.. Este es un JavaScript puro que no se basa en otra biblioteca de terceros como jQuery.

Básicamente, duplicará el menú de la lista y lo transformará en un menú hará uso de la interfaz de usuario nativa desde el propio dispositivo.

Por favor, consulte la documentación oficial para una mayor implementación..

Conclusión

Hemos recorrido todo el camino para crear una navegación receptiva desde cero. Este que hemos creado aquí es solo uno de los ejemplos, y como dijimos anteriormente en esta publicación y se muestra arriba, hay muchas otras soluciones que puede implementar. Por lo tanto, ahora le toca a usted decidir qué práctica es la que mejor se adapta a los requisitos y la estructura de navegación de su sitio web..