Los menús de navegación solían ser una cosa bastante simple. Codifica una lista desordenada, flota a la izquierda y listo. El diseño responsivo está de moda en estos días, a pesar de que se enfrenta a nuevos desafíos al crear un diseño de menú.
Continúe mientras comenzamos desde cero y codifique un menú de navegación simple pero efectivo que pueda modificar y reutilizar fácilmente en sus propios proyectos.
Lo que estamos construyendo
Si eres el tipo de persona a la que le gusta saltar adelante, aquí tienes un adelanto de lo que estamos construyendo. Asegúrese de cambiar el tamaño de la ventana de su navegador para ver los conceptos de respuesta en acción.
Manifestación: Haz clic aquí para verlo y modificarlo en Dabblet.
El HTML
Saltemos a la derecha en este proyecto sin un montón de pelusa innecesaria. Estoy seguro de que estás ansioso por llegar a lo bueno.
El primer paso es decidir sobre algún marcado. Dado que este es un menú de navegación, es el lugar perfecto para implementar HTML5? Nav? elemento.
Lo creas o no, este pequeño trozo de código hizo girar mi cabeza cuando llegó el momento de la prueba. Por alguna razón desconocida para mí, ¡mis estilos simplemente no estaban teniendo efecto en IE6-8! Después de unos diez minutos de deambular, me di una palmada en la cabeza cuando me di cuenta de que había usado elementos HTML5, que por supuesto no son compatibles con nada más antiguo que IE9.
Afortunadamente, la solución es fácil, simplemente coloque el famoso html5shiv y estará listo (coloque esto en la parte principal de su documento).
Añadir la lista
Ahora que hemos resuelto nuestro elemento contenedor, es hora de lanzar un simple UL con ocho enlaces. Este tutorial depende bastante de la cantidad de enlaces, así que asegúrese de usar ocho si no está lo suficientemente seguro como para aventurarse por su cuenta en algunas áreas.
Añadir la etiqueta secundaria
Para hacer que el menú sea un poco más interesante y útil, incluyamos otra línea de texto debajo de la inicial en cada uno de los elementos del menú. Hay varias maneras en que podríamos abordar esto, así que siéntase libre de estar en desacuerdo con la forma en que lo abordé. Básicamente, acabo de tirar una etiqueta de ruptura y usé una pequeña Elemento para la segunda línea. El segundo elemento será pequeño, por lo que nos proporciona un gancho bastante semántico sin divs, ID o clases innecesarios.
Control del progreso
Después de este paso, debe tener una lista simple de enlaces sin estilo. Observe que sin ningún esfuerzo, esas etiquetas pequeñas ya funcionarán y reducirán el tamaño de todas las demás líneas.
Estilos de arranque
Para comenzar nuestro CSS, saquemos ese viejo selector universal y tomemos el consejo de Paul Irish aplicando tamaño de caja: cuadro de borde a cada elemento. Esto nos ayudará a dimensionar las cosas fácilmente con porcentajes, aunque usaremos bordes.
Estilos de contenedores
Antes de comenzar a aplicar estilos a los elementos de la lista individual, apliquemos algunos estilos básicos a nuestros elementos principales. En primer lugar, apunta al elemento de navegación y configúralo a 90% del ancho del cuerpo. Esto abarcará la mayor parte del camino a través del espacio disponible pero aún así dejará a nuestro navegador un poco de espacio para respirar. Asegúrese de centrarlo en la página también con los márgenes automáticos.
También salte y aplique los estilos de lista desordenados necesarios para restablecer la lista y eliminar las viñetas.
Estilos de menú
Ahora que nuestros elementos principales actúan juntos, es hora de trabajar específicamente en los elementos del menú, que se pueden orientar a través del elemento de navegación junto con las etiquetas de anclaje y los elementos de la lista.
Aquí hay una gran cantidad de código, pero no le tengas miedo, te guiaré paso a paso.
He ordenado las propiedades aquí en orden alfabético para una referencia fácil, pero para ser honesto, esta no es realmente mi forma preferida de hacer las cosas. Me gusta agrupar estilos por función para que tengan un poco más de sentido. Si reordenamos nuestros estilos de esta manera, se vuelven más fáciles de discutir.
En primer lugar está el trozo de estilos que define la forma y el diseño de cada elemento de la lista. Hemos cambiado los anclajes para bloquear elementos de nivel, los hemos flotado a la izquierda, se les ha asignado un ancho y se les ha dado un poco de relleno. Esto creará un bonito rectángulo grande para cada enlace en el menú. ¿Por qué 12.5% para el ancho? Porque tenemos ocho elementos de menú y 100% / 8 Nos da 12.5% de ancho en cada artículo.
El siguiente es el fragmento de código que define el estilo visual de las cajas que acabamos de crear. Les hemos dado un color de fondo y un borde de un solo píxel en el lado derecho.
Finalmente, terminamos con todos los estilos que se relacionan con el texto del menú. Todo esto es algo bastante básico, la bola de una curva es la? Cutive? fuente, que puedes encontrar aquí.
Para el pequeña Estilos, cambié el color, eliminé la transformación de texto en mayúsculas y configuré la fuente en Helvetica.
Control del progreso
Estos estilos hicieron toda la diferencia en el mundo. Nuestro menú está buscando mucho mejor. La fuente personalizada funciona, los enlaces están en línea, el texto pequeño es perfecto; Es una cosa hermosa.
Estilos de Hover
Cuando el usuario se desplaza sobre un elemento del menú, vamos a negro. Para que se sienta un poco más agradable, también agregué una transición de medio segundo.
Arreglo de la frontera
Ahora, no puedes verlo dado que nuestro fondo es blanco, pero en realidad hay un problema con nuestras fronteras. Realmente solo tienen la intención de dar un poco de definición visual a cada elemento del menú, lo que significa que no hay necesidad de una al final. Para solucionar esto, podemos usar la última: pseudo clase infantil.
A continuación, he aplicado un color de fondo temporal solo para que pueda ver la diferencia entre las versiones anteriores y posteriores.
Ir responsivo
Este proyecto sirve como un buen ejemplo de la diferencia entre un diseño sensible y uno fluido. En este punto, nuestro menú es fluido (usa anchos basados en porcentajes) pero no responde. Podemos ver esto claramente cuando intentamos reducir demasiado el tamaño de nuestra ventana:
Como puedes ver, esto es un desastre! Comencemos con algunas consultas de medios para ver si podemos solucionar este problema. La mejor manera de averiguar dónde necesitamos consultas de medios es simplemente probarlo y ver dónde se rompe el diseño, y luego explicarlo.
1220px
El primer problema que veo se produce alrededor de 1.200 píxeles de ancho. Aquí, los elementos de texto más largos comienzan a cortarse y ya no se pueden leer por completo.
Para solucionar esto, solo necesitamos ajustar nuestro tamaño de fuente. Me dirijo a un área justo antes de que ocurra el problema (1,220px) y configuro mis fuentes a 10px.
Con ese cambio, el problema ya no ocurre. A medida que reducimos el tamaño de nuestra ventana, el menú responde y reduce el tamaño de la fuente para adaptarse al tamaño.
930px
Una vez más, reducimos el tamaño de la ventana y encontramos que las cosas se ponen peludas alrededor de la marca de 900px. Tenemos muchos problemas con el desbordamiento aquí:
En lugar de hacer que el tamaño de la fuente sea cada vez más pequeño hasta que no pueda verlo más, esta vez volveremos a hacer que el menú fluya completamente para que se divida en dos filas. Ahora, cada enlace puede ser grande y agradable, dado que esto podría estar cerca del punto en que los tamaños de las tabletas se activen.
Observe que también tuvimos que repensar cómo funcionan nuestras fronteras esta vez. Ahora necesitamos que la fila superior tenga bordes en la parte inferior, pero no la fila inferior. Una vez más, los selectores de pseudo clase hacen esto bastante fácil.
580px y 320px
El formato de dos filas funciona lo suficientemente bien hasta que estamos por debajo de 600px y luego todo el infierno se desata. La cosa se desmorona completamente.
Para solucionar esto, terminaremos nuestras consultas de medios con un formato de dos columnas y cuatro filas. Usaremos este diseño para 580px a continuación y reduciremos el tamaño de la fuente un poco a 320px.
Nuestro menú ahora se ve bien incluso en un tamaño muy pequeño. El inconveniente es que ocupa una buena parte de la altura vertical, pero puedes eliminar parte del relleno si eso te molesta.
Selectivizr
Los observadores astutos entre ustedes notarán que contabilizamos las versiones más antiguas de IE con html5shim, solo para seguir con algunos selectores de pseudo clase que tampoco funcionarán en IE. Para tener en cuenta esto, asegúrese de descargar e implementar Selectivizr, una utilidad de JavaScript de lujo diseñada específicamente para llevar los selectores de CSS3 a IE6-8.
Conclusión
El diseño sensible no es caminar en el parque.Se necesita tiempo, esfuerzo y un montón de? Saber cómo? para llevar a cabo con eficacia. Me gusta dividirlo en desafíos individuales como el menú de navegación aquí y la galería de imágenes en un artículo anterior para que pueda aprender el proceso sin sentirse abrumado.
Ahora debería estar bien equipado para embarcarse en su propio proyecto de menú de navegación de respuesta. Deja un comentario a continuación y muéstranos lo que se te ocurre. ¿Qué desafíos únicos enfrentaste en el camino?