Share
Lo siguiente en la serie PSD codificada de Orman Clark es su impresionante menú de navegación vertical. Lo recrearemos con CSS3 y jQuery usando la mínima cantidad de imágenes posible..
Las únicas imágenes que usaremos son para los íconos: crearé un sprite utilizando una nueva herramienta llamada SpriteRight, pero esto es opcional. Además, usaré GradientApp para crear mis gradientes CSS3, pero de nuevo esto es opcional.
Comencemos lanzando un marcado código básico, un documento HTML5 vacío:
Menú de navegación vertical: CSS3 codificado
Y ahora el marcado para nuestro menú; una lista desordenada dentro de un contenedor contenedor.
- Amigos 340
- Videos 147
- Galerias 340
- Podcasts 222
- Los robots dieciséis
Finalmente, creamos los submenús colocando una lista desordenada anidada dentro de cada uno de nuestros elementos de lista existentes.
- Amigos 340
- Lindos gatitos 14
- Cosas extrañas 6
- Fallas automáticas 2
- Videos 147
- Lindos gatitos 14
- Cosas extrañas 6
- Fallas automáticas 2
- Galerias 340
- Lindos gatitos 14
- Cosas extrañas 6
- Fallas automáticas 2
- Podcasts 222
- Lindos gatitos 14
- Cosas extrañas 6
- Fallas automáticas 2
- Los robots dieciséis
- Lindos gatitos 14
- Cosas extrañas 6
- Fallas automáticas 2
Está bien, puede parecer mucho allí, pero no dejes que eso te confunda. Primero, hemos creado una lista desordenada con cinco elementos de lista, cada uno con una etiqueta de anclaje dentro. Luego agregamos listas desordenadas anidadas, cada una con tres elementos de lista.
También agregué una clase a cada elemento de la lista, para que así el estilo sea más fácil más adelante. Finalmente, para los números, hemos creado una etiqueta de intervalo dentro de cada etiqueta de anclaje. Si lo ves en tu navegador debería verse así:
Primero nos aseguraremos de que nuestro menú se muestre correctamente. Agrega estas reglas a css / styles.css, Ellos establecerán el margen y el relleno de todos nuestros uls a 0, y eliminar el estilo de lista.
ul, ul ul margen: 0; relleno: 0; estilo de lista: ninguno;
Antes de comenzar a diseñar nuestro menú, crearemos una envoltura con un ancho fijo y un tamaño de fuente de 13px (expresado en unidades em). En primer lugar añadiremos una regla al cuerpo., tamaño de letra: 100%;. Esto asegurará que nuestro estilo se base en el tamaño de fuente predeterminado del navegador (generalmente 16px).
Ahora para explicar cómo funciona el tamaño de fuente del contenedor. Tenemos que expresarlo como un em; proporcional al tamaño del tamaño de fuente de su padre. Apuntamos a 13px, por lo que, asumiendo que el tamaño del padre sea de 16px, nuestro resultado resultante es 13/16 = 0.8125. 13px es 0.8125 * 16px.
Medir nuestras fuentes (y otros elementos) en unidades em las hará fluidas. Ahora, si cambiamos el tamaño de fuente del contenedor (o el tamaño predeterminado de nuestro navegador), todo el menú se ajustará en relación a esa base. Trate de no dejar que esto lo confunda, si necesita ayuda para convertir sus fuentes, le sugiero que visite pxtoem.com.
cuerpo font-size: 100%; a texto-decoración: ninguno; ul, ul ul margen: 0; relleno: 0; estilo de lista: ninguno; #wrapper width: 220px; margen: 100px auto; tamaño de letra: 0.8125em;
Le hemos dado a la envoltura un ancho fijo de 220 px y la hemos centrado con un margen superior agregando margen: 100px auto;.
A continuación vamos a añadir un poco de estilo para el menú. Haremos el ancho y alto del menú ul. auto, A continuación, aplicar una sombra a todo el asunto. Al agregar la altura como automática, la sombra se ajustará cuando se abra el control deslizante.
Luego las etiquetas de anclaje; agregaremos un ancho del 100%, lo que significa que se extenderán hasta el ancho de 220 px de la envoltura. Para una altura usaremos ems, así que piense en nuestro tamaño de fuente principal de 13px. Nuestro .psd muestra una altura de 36px, así que ese es nuestro objetivo. Tomaremos 36 y lo dividiremos por 13, lo que equivale a aproximadamente 2.75em (36/13 = 2.76923077). También usaremos 2.75em para la altura de la línea (para centrar todo el texto verticalmente) luego aplicaremos algunas sangrías de texto para insertar texto, haciendo espacio para nuestro ícono más adelante.
Agregaremos un gradiente de CSS3 para el fondo, continué y creé esto con GradientApp. A continuación, cambiaremos la fuente, aplicaremos la fuente Helvetica Neue y un color blanco junto con una sombra de texto. Tenga en cuenta que no usamos una fuente de tamaño aquí. Esto se debe a que nuestra fuente base es 13px para el contenedor que nuestros anclajes han heredado, por lo que no es necesario agregarlo.
cuerpo font-size: 100%; a texto-decoración: ninguno; ul, ul ul margen: 0; relleno: 0; estilo de lista: ninguno; #wrapper width: 220px; margen: 100px auto; tamaño de letra: 0.8125em; .menu ancho: auto; altura: auto; -webkit-box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); -moz-box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); .menu> li> a background-color: # 616975; imagen de fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, de (rgb (114, 122, 134)), a (rgb (80, 88, 100)); imagen de fondo: -webkit-linear-gradient (arriba, rgb (114, 122, 134), rgb (80, 88, 100)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (114, 122, 134), rgb (80, 88, 100)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (114, 122, 134), rgb (80, 88, 100)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (114, 122, 134), rgb (80, 88, 100)); imagen de fondo: gradiente lineal (arriba, rgb (114, 122, 134), rgb (80, 88, 100)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 727a86', EndColorStr = "# 505864"); borde inferior: 1px sólido # 33373d; -webkit-box-shadow: inserción 0px 1px 0px 0px # 878e98; -moz-box-shadow: inserción 0px 1px 0px 0px # 878e98; cuadro de sombra: inserción 0px 1px 0px 0px # 878e98; ancho: 100%; altura: 2.75em; línea de altura: 2.75em; texto-sangría: 2.75em; bloqueo de pantalla; posición: relativa; Familia tipográfica: "Helvetica Neue", Helvetica, Arial, sans-serif; peso de la fuente: 600; color: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .5);
¡Bueno! ¡Ahora está empezando a verse mejor y también estamos obteniendo algo de estructura! Pero ¿qué tal si agregamos un color de fondo para que el menú se destaque mejor ...
cuerpo fondo: # 32373d;
Desde el CSS anterior puede ver que es fácil olvidar lo que realmente significan sus unidades de em. Es una buena idea dejar comentarios de sus cálculos originales, para que cuando vuelva a su código en el futuro aún pueda descifrar lo que está sucediendo. Recuerda la fórmula: px deseado / padre px = resultado em y use el símbolo aproximado (≈) si redondea el resultado.
#wrapper font-size: 0.8125em; / * 13/16 = 0.8125 * / .menu> li> a altura: 2.75em; / * 36/13 ≈ 2.75 * / line-height: 2.75em; / * 36/13 ≈ 2.75 * / text-indent: 2.75em; / * 36/13 ≈ 2.75 * /
Es hora de agregar algo de CSS para los submenús blancos. Tendremos que añadir un fondo blanco con unos bordes grises. Note que para el último no tiene un borde inferior, así que lo apuntaremos con el :último niño pseudo selector para eliminarlo. Tiene un borde azul oscuro, así que eliminaremos el gris, agregando un azul.
El siguiente paso será similar al anterior; agregaremos las alturas y los anchos nuevamente, cambiaremos el fondo a blanco. Esta vez tenemos que cambiar el tamaño de la fuente. Apuntamos a 12px, así que usando nuestro cálculo de px deseado / padre px = resultado em obtenemos 0.923em
También cambiemos el color del texto a gris. Nota que usamos bloqueo de pantalla. Si hubiéramos usado flotador izquierdo Los menús no se animarían sin problemas, así que usamos el bloque de visualización para ayudarlos a moverse de forma agradable y sin problemas. También notará que hemos agregado un estilo extra; Estamos aplicando esto al último hijo de la sub-ul. Tenemos que hacer esto para poder cambiar el color del borde.
.menu ul li a background: #fff; borde inferior: 1px sólido # efeff0; ancho: 100%; altura: 2.75em; línea de altura: 2.75em; texto-sangría: 2.75em; bloqueo de pantalla; posición: relativa; Familia tipográfica: "Helvetica Neue", Helvetica, Arial, sans-serif; tamaño de letra: 0.923em; peso de la fuente: 400; color: # 878d95; .menu ul li: last-child a border-bottom: 1px solid # 33373d;
Está empezando a verse muy bien ahora!
Ahora agregaremos algunos estilos activo y activo, ¡especialmente cuando el acordeón está abierto! También agregaremos un borde inferior al menú activo. Ahora si estás pensando, "¿por qué no hemos agregado una clase activa?". Bueno, amigo mío, eso es lo que hará jQuery más adelante..
.menu> li> a: hover, .menu> li> a.active background-color: # 35afe3; imagen de fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, desde (rgb (69, 199, 235)), hasta (rgb (38, 152, 219))); imagen de fondo: -webkit-linear-gradient (arriba, rgb (69, 199, 235), rgb (38, 152, 219)); imagen de fondo: -moz-lineal-gradiente (arriba, rgb (69, 199, 235), rgb (38, 152, 219)); imagen de fondo: -o-lineal-gradiente (arriba, rgb (69, 199, 235), rgb (38, 152, 219)); imagen de fondo: -ms-lineal-gradiente (arriba, rgb (69, 199, 235), rgb (38, 152, 219)); imagen de fondo: gradiente lineal (arriba, rgb (69, 199, 235), rgb (38, 152, 219)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 45c7eb', EndColorStr = "# 2698db"); borde inferior: 1px sólido # 103c56; -webkit-box-shadow: inserción 0px 1px 0px 0px # 6ad2ef; -moz-box-shadow: inserción 0px 1px 0px 0px # 6ad2ef; cuadro de sombra: inserción 0px 1px 0px 0px # 6ad2ef; .menu> li> a.active border-bottom: 1px solid # 1a638f;
Agregaremos los iconos usando el :antes de seudo. Primero, nos dirigiremos a todas las etiquetas de anclaje sub-ul, aplicaremos el sprite de fondo y lo configuraremos para que no se repita. Le daremos un tamaño de fuente de 36px aunque no haya texto; usaremos 36px para que podamos usar un ancho y alto de 1em que ahora será igual a 36px. Luego empujaremos el elemento hacia abajo un 50% y eliminaremos .5em de la parte superior del margen para centrarlo.
Usando las clases para cada elemento de la lista sub-ul, los apuntaremos y les daremos a cada uno la posición de fondo apropiada para el sprite.
Nota: Creé este sprite utilizando la nueva aplicación llamada SpriteRight. Si deseas jugar con el sprite, he incluido las imágenes y los archivos de proyecto en los archivos de origen..
.menu> li> a: antes contenido: "; imagen de fondo: url (... /images/sprite.png); repetición de fondo: no-repetir; fuente-tamaño: 36px; altura: 1em; ancho: 1em; posición : absoluto; izquierdo: 0; máximo: 50%; margen: -.5em 0 0 0; .item1> a: antes de posición de fondo: 0 0; .item2> a: antes de posición de fondo: -38px 0; .item3> a: antes de background-position: 0 -38px; .item4> a: antes de background-position: -38px -38px; .item5> a: antes de background-position: -76px 0 ;
Bien, ¿recuerdas esos tramos que añadimos? Estos crearán los números.!
Primero agregaremos un tamaño de fuente de 11px (que se convierte en aproximadamente 0.857em). Los posicionaremos absolutamente, y los empujaremos desde la derecha por 1em, una vez más, para hacer que este fluido. Lo empujaremos hacia abajo un 50% desde la parte superior y quitaremos el margen superior para centrarlo. Se agregará un fondo junto con algunas sombras de cuadro, un recuadro y una inicial..
Una vez más para hacerlo fluido, usaremos relleno para crear el ancho y la altura. Incluso hemos usado ems en el radio del borde; necesitaremos esto porque si el texto se hace más grande aparecerán desproporcionados. También agregué otro estilo para cuando se desplace el mouse o se aplique una clase activa al enlace.
.menu> li> a span font-size: 0.857em; pantalla: bloque en línea; posición: absoluta; derecha: 1em; superior: 50%; fondo: # 48515c; línea-altura: 1em; altura: 1em; relleno: .4em .6em; margen: -.8em 0 0 0; color: #fff; texto-sangría: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: .769em; radio del borde: .769em; -webkit-box-shadow: inserción 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); -moz-box-shadow: inserción 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); box-shadow: recuadro 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); text-shadow: 0px 1px 0px rgba (0,0,0, .5); peso de la fuente: 500; .menu> li> a: hover span, .menu> li a.active span background: # 2173a1;
Este proceso será similar al paso anterior, por lo que no voy a entrar en muchos detalles. Las principales diferencias aquí son que eliminé el color de fondo, cambié el borde y cambié el color de la fuente. También necesitamos agregar esa flecha y una vez más nos apoyaremos en el :antes de psuedo Definimos un ancho y una altura y agregamos algo de posicionamiento a la izquierda usando ems para asegurarnos de que sea fluido.
Por último, un estado flotante (gracias a aquellos en los comentarios que señalaron su ausencia inicial). Simplemente aplicamos un color más oscuro (# 32373D) al texto de anclaje, la pseudo flecha y el número dentro del intervalo.
.menu ul> li> a span font-size: 0.857em; pantalla: bloque en línea; posición: absoluta; derecha: 1em; superior: 50%; / fondo: #fff; borde: 1px sólido # d0d0d3; línea-altura: 1em; altura: 1em; relleno: .4em .7em; margen: -.9em 0 0 0; color: # 878d95; texto-sangría: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: 769em; radio del borde: 769em; texto-sombra: 0px 0px 0px rgba (255,255,255, .01)); .menu> li> ul li a: antes de contenido: '▶'; tamaño de fuente: 8px; color: #bcbcbf; posición: absoluta; ancho: 1em; altura: 1em; arriba: 0; izquierda: -2.7em; .menu> li> ul li: desplace el mouse sobre, .menu> li> ul li: desplace el ratón por un tramo, .menu> li> ul li: desplace el cursor sobre: antes de color: # 32373D;
Así que se ve muy bien ahora, ¿verdad? Creo que es hora de que agreguemos alguna funcionalidad a esto.!
Apuesto que has estado esperando para llegar hasta aquí? Bueno, finalmente estamos en el punto jQuery. Primero tendremos que enlazar con la biblioteca jQuery, utilizando una alojada por Google. La última versión actual es 1.7.1. Agregue lo siguiente a la sección de encabezado de su página HTML:
Ahora agregue lo siguiente en la parte inferior de su documento html, antes del cierre
Accentsconagua
var menu_ul = $ ('. menu> li> ul'), menu_a = $ ('. menu> li> a'); Primero, almacenamos el submenú y las etiquetas de anclaje del menú principal en dos variables diferentes, esto hace que sea más fácil referirse a ellas más adelante..
menu_ul.hide ();
Esto ocultará todos los submenús cuando se cargue la página.
menu_a.click (función (e)
Primero le diremos que haga algo cuando hacemos clic en una de las etiquetas de anclaje del menú principal.
e.preventDefault ();
Aquí estamos evitando que las etiquetas de anclaje sigan algún enlace o cambien la dirección en la barra de direcciones. p.ej. si alguna vez creas una etiqueta de anclaje con un enlace de '#', al hacer clic en ella, no aparecerá en la barra de direcciones ahora. Las etiquetas de anclaje están básicamente deshabilitadas.
if (! $ (this) .hasClass ('active')) menu_a.removeClass ('active'); Ahora le indicaremos que SI el menu_a tiene la clase 'activa', elimínela.
menu_ul.filter (': visible'). slideUp ('normal'); Aquí usamos '.filter' y ': visible'. Si un menú está abierto, deslícelo hacia arriba con una velocidad normal.
$ (this) .addClass ('active'). next (). stop (true, true) .slideDown ('normal'); Si el menú está cerrado, agregue la clase 'activa' (para que podamos acceder al agradable estilo CSS) y deslícela hacia abajo con una velocidad normal.
else $ (this) .removeClass ('active'); $ (this) .next (). stop (true, true) .slideUp ('normal'); Ahora, necesitaremos usar un ELSE como parte de nuestra declaración condicional. Por lo tanto, ELSE elimina la clase activa y desliza el menú hacia arriba para ocultarlo. Esto es solo para que podamos codificar cualquier menú sin tener que recargar la página.
Nota: Si desea cambiar la velocidad de deslizamiento, cambie normal a, por ejemplo, '500'. Eso lo deslizará a 500 milisegundos..
Si está interesado en aprender jQuery desde cero, le recomendamos que visite el curso gratuito de Learn jQuery in 30 Days de tutsplus.com.
Bueno, hemos llegado hasta el final! ¡Hemos codificado el hermoso menú de navegación vertical de Orman usando CSS3 y jQuery! Manténgase sintonizado para obtener una sugerencia rápida sobre cómo crear esto utilizando solo CSS3 con el: pseudo selector de destino.
#wrapper ancho: 440px; tamaño de letra: 1em Espero que hayas disfrutado este tutorial, gracias por leerlo.!
