¡Hoy tenemos otro increíble proyecto CSS paso a paso para usted! Esta vez vamos a construir un menú de navegación vertical de expansión súper útil. Es una excelente manera de ocultar muchos enlaces en un espacio bastante pequeño y las animaciones agregarán un toque agradable a su sitio.
Incluso si eres un principiante completo, deberías poder lograrlo. Lo guiaré a lo largo de cada paso del camino y le explicaré cómo funciona cada fragmento de código para que pueda implementar estas mismas técnicas en proyectos futuros y profundizar su comprensión de CSS. ¡Empecemos!
El concepto
Antes de comenzar a codificar, siempre es útil presentar el concepto aproximado de lo que quiere lograr para que pueda envolver su cerebro en torno a lo que va a estar involucrado. El elemento que estamos creando hoy es un menú de navegación vertical que está en una especie de formato de acordeón modificado (obtenga un vistazo del producto terminado aquí).
Como puede ver, las secciones en la parte inferior están cerradas de manera predeterminada y se abren cuando usted las sobre. Sin embargo, para agregar algunas variaciones agradables, también incluiremos una sección que permanece abierta todo el tiempo. En la sección principal, que siempre está abierta, incluiremos un breve mensaje de bienvenida y en las secciones que se abren, habrá sub-secciones de enlaces de navegación.
Ahora que tenemos una buena idea de hacia dónde vamos, comencemos a delinear la estructura en nuestro HTML.
El HTML
Lo primero que haremos es agregar un buen HTML5 para envolver el menú. El nuevo elemento de navegación proporciona un contenedor semántico hermosamente para nuestro menú.
Ahora pensemos en cómo se estructurará nuestro menú. No solo vamos a tener una lista de enlaces, cada barra representa un enlace con un área adicional debajo de ella. Vamos a envolver estos en un div. Luego, dentro de cada div necesitaremos un enlace principal (la barra de color) y una lista de subenlaces (el área blanca). Suponiendo que este elemento se arrojará a un sitio que ya tiene un estilo predeterminado, decidámonos arbitrariamente en h4 para el enlace principal y una simple lista desordenada para el resto.
Podemos copiar, pegar y modificar esta sección de código para componer las distintas partes de nuestro menú de navegación. Aquí tenemos una sección de Portafolio, Acerca de, y Contacto, cada una con tres sub-enlaces. A cada sección se le asigna la misma clase (elemento de menú) para que podamos diseñarlas de una sola vez.
Quería enfocarme primero en esas áreas porque son todas iguales, pero recuerda que la sección superior es realmente diferente, tanto en funcionalidad como en contenido. En lugar de mantener una lista desordenada, contendrá un párrafo. También agregaremos una clase única para que sea mucho más fácil apuntar en nuestro CSS.
Con eso, ya hemos terminado con el HTML. Aunque no tiene ningún estilo, la vista previa en vivo muestra perfectamente la jerarquía de nuestro menú de navegación. Aquí puedes ver claramente nuestro menú empezando a tomar forma.
Estilos base
Para comenzar nuestro estilo de menú, necesitamos establecer algunos conceptos básicos. Primero, borraremos los márgenes y el relleno predeterminados. Estaremos aplastando los divs uno al lado del otro, por lo que cualquier espacio predeterminado en el navegador arruinará el diseño.
A continuación, aplicaremos un color simple al fondo para que las partes blancas de nuestro menú se destaquen. Luego agregaremos algunos estilos de fuente básicos y agregaremos una ligera sombra al menú. Tenga en cuenta que el margen establecido en el bloque de navegación centra el menú en la página, esto es solo para fines de visualización y debe eliminarse cuando desee colocar el menú en su lugar.
Finalmente, agregaremos algunas dimensiones y color de fondo a los selectores de elementos de menú y de navegación. Aquí está el código resultante:
A este punto, la vista previa parece que hemos hecho más daño que bien, pero no teman, comenzará a verse elegante en ningún momento.
Estilos de encabezado
Ahora es el momento de diseñar nuestras etiquetas h4 y convertirlas en las barras horizontales que vimos en nuestra maqueta. Para hacer esto, solo necesitamos un poco de relleno y un color de fondo. Mientras estemos aquí, también podemos comenzar a diseñar la tipografía. Estamos heredando la familia de fuentes que configuramos antes, por lo que no necesitamos volver a escribir eso. En su lugar, solo tenemos que establecer un tamaño y peso.
Como puede ver en la imagen de abajo, nuestros estilos de enlace aún están anulando algunos de los estilos de tipo que configuramos aquí, por lo que tendremos que ir y corregirlos a continuación.
Enlaces de encabezado
Obviamente, el enlace azul no es bueno, así que tenemos que cambiarlo a blanco. También queremos deshacernos de cualquier decoración de texto (el subrayado). Ahora, podríamos detenernos aquí, pero el comportamiento predeterminado sería que solo se puede hacer clic en el texto y no en toda la barra, lo que no es ideal. Para hacer que toda la barra sea un enlace, configuramos la propiedad de visualización para bloquear y el ancho al tamaño completo del menú (200 px).
Ahora nuestra barra de color se ve mucho mejor. Aquí está la vista previa:
Haciéndolo bonito
Si quieres seguir con algo simple, puedes omitir este paso, pero voy a seguir adelante y agregar algunos ajustes visuales más. Retroceda y modifique ese bloque de estilo de encabezado para incluir un degradado y algunos bordes muy sutiles. Es probable que ni siquiera puedas detectar los bordes hasta que se cierre el menú, pero combinados con los gradientes realmente ayudarán a diferenciar cada sección para que no parezcan un solo bloque grande.
Estilos de Hover
A continuación, agregaremos un estilo de desplazamiento sutil a los enlaces de la barra. Todo lo que vamos a hacer es modificar un poco los colores en el degradado para que se vuelvan más brillantes cuando se desplaza.
Estilos de párrafo
Recuerde que el primer elemento de nuestro menú contiene un párrafo y no una lista desordenada, así que a continuación atacaremos esto para que se vea bien. Las listas tomarán una porción considerable de código, pero el párrafo apenas requiere nada. Solo define el tamaño y el color, luego agrega un poco de relleno.
¡La sección superior ahora se ve genial! Tanto la barra de encabezado como el párrafo son exactamente donde necesitamos que estén.
Lista de estilos desordenados
Hay un montón de cosas que debemos hacer para que estas listas se aclaren. Cambiemos un poco las cosas y primero veamos el código, luego te mostraré.
Como puede ver, el primer bloque se dirige a la lista desordenada como una unidad completa. Aquí establecí algunos tamaños básicos y estilos de fuente y eliminé el punto de viñeta estableciendo list-style-type en none.
A continuación me dirigí específicamente a los enlaces. Los moví, quité los subrayados, configuré el color y realicé la misma pantalla: truco de bloque que vimos antes para agrandar el área en la que se puede hacer clic.
Para terminar, apliqué algunos estilos personalizados a los elementos de la lista. El borde inferior crea una separación entre cada elemento y el estilo de desplazamiento cambia el fondo. ¡Aquí está el resultado de nuestro trabajo, nuestro menú está casi terminado!
Colapsar y animar
Hasta este punto, hemos mantenido abierto nuestro menú para que podamos verlo mientras diseñamos los elementos en su interior. Ahora que sabemos que todos nuestros estilos visuales son exactamente como los queremos, es hora de colapsar cada sección y luego configurarlas para que se abran al pasar.
De manera predeterminada, los navegadores establecerán la altura de esas listas desordenadas en automáticas, lo que significa que serán lo suficientemente altas como para contener todo el contenido. Para contraer las secciones del menú para que solo se muestren las barras, podemos dirigirnos a esas listas desordenadas y establecer la altura en 0. Tenga en cuenta que estamos dejando el párrafo solo, esto asegurará que nuestra sección superior siempre esté abierta.
Ahora nuestro menú es mucho más corto y no consume mucho espacio. Finalmente, también puede ver el beneficio de los gradientes y las fronteras que implementamos anteriormente.
Animando la transición
A continuación, querremos abrir estos menús de respaldo al pasar el mouse, pero antes de hacerlo, configuremos una animación para que la transición sea agradable y gradual. Asegúrese de insertar las diversas extensiones del navegador y de apuntar a la propiedad de altura.
Expandiendo en Hover
Todo lo que queda por hacer ahora es hacerlo para que cuando se desplace, la ul se expanda. Esto es complicado, así que ten cuidado. Tu instinto puede ser hacer algo como? Ul: hover? Pero eso no es lo que queremos. En su lugar, queremos hacerlo para que pueda desplazarse a cualquier lugar de ese elemento del menú, ya sea en la barra o en la lista desordenada. Sin embargo, el elemento que queremos expandir sigue siendo solo la ul. Así es como se ve nuestro selector:
A veces, leer un selector al revés es útil cuando se trata de averiguar qué hace. Esto le dice a nuestro navegador que establezca una altura de 93px en nuestras listas desordenadas cuando se desplaza un elemento .menu.
Una cosa importante a tener en cuenta aquí es que no podemos establecer la altura en auto porque, por alguna razón, esto desactiva la animación. Si no desea la animación, una altura de auto es mucho más flexible y le permite variar el número de elementos del submenú. Si quieres hacer esto con la animación, tendrás que apuntar a la altura de cada uno individualmente.
Verlo en acción
Nuestro menú ahora está completo. Asegúrate de patear los neumáticos en la demostración para ver cómo funciona todo. También incluiré un enlace al código completo para que puedan verlo todos juntos.
Manifestación: Demo de lanzamiento
Ver el Código: Echa un vistazo a los HTML y CSS en Tinkerbin
Conclusión
Espero que hayan disfrutado este tutorial de creación de un menú de navegación vertical animado. En la implementación, es muy similar a los botones de descarga animados que creamos el otro día, así que realmente deberías entender el ocultamiento y mostrar contenido usando CSS puro.
Busque una versión aún mejor de este menú para que aparezca en nuestro nuevo sitio asociado, Design Curate. Encontrarás una gran cantidad de regalos fantásticos allí que puedes descargar e implementar en tus proyectos hoy.