Share
No hay mejor manera de aprender CSS3 que ensuciarse las manos en un proyecto real y eso es exactamente lo que vamos a hacer. Voy a enseñarte cómo crear un impresionante menú CSS3 en capas usando unos pocos principiantes a técnicas avanzadas de CSS. Así que saque su editor de texto o IDE favorito y comencemos con algo de magia CSS3!
Hoy aprenderá a crear la gota de azúcar de los diferentes estilos y variaciones de color disponibles. Recibirás todas las variaciones en los archivos fuente. También como un bono adicional, he agregado un poco de Javascript opcional para que puedas rotar tus imágenes dependiendo del elemento del menú desplegado. El archivo fuente incluso viene con su propia documentación.!
Nota: el soporte para IE es limitado en este momento. ¿Lo haremos principalmente con el propósito de empujar el sobre con lo que podemos hacer en CSS3? pero como con todas las cosas al borde de la practicidad, significa sacrificar un poco de estabilidad. Aunque abordaremos el tema de IE al final del tutorial!
Hoy ofrecemos este tutorial en dos formatos diferentes: un video y un tutorial escrito completo a continuación. Siga el método de aprendizaje que prefiera (o ambos) y llegaremos al final en poco tiempo.!
El tutorial escrito paso a paso se encuentra a continuación. Asegúrese de agarrar la fuente descargable completa también!
Lo primero que queremos hacer es crear algunas capas que se superpongan entre sí y se mantengan en su lugar mientras se usa el menor código posible. Es importante no rellenar el código con mucha información y no crear mucha información.
Flotadores innecesarios o elementos posicionados absolutos, por lo que trataremos de mantenernos lo más relacionados posible..
Como puedes ver, el código es bastante sencillo. Básicamente, hemos apilado una capa sobre otra y de esta manera podrán mantener sus posiciones..
A continuación queremos agregar una imagen al centro de la rueda, o lágrima en este caso. Para hacerlo, simplemente agregaremos el siguiente código entre la clase wrap4 y la clase completa. Esto bloqueará la imagen en el centro del lienzo. Solo usaremos una imagen de Rockable para esta porque son geniales.!
Accentsconagua
Ahora querremos agregar algunos estilos a cada capa uno por uno.
Este será el contenedor principal para el menú de su rueda. También contiene cualquier fuente universal y tamaño de fuente que afecte a cualquier cosa que esté dentro de la div.
# menu-wrap background: # e7e7e7; / * Esto no es necesario * / altura: 600px; / * Esto es importante y mantiene la rueda en su lugar cuando se desplaza sobre los elementos * / font-family: sans-serif, Franklin Gothic Medium, Helvetica, Arial; / * Si no usa Franklin, irá automáticamente a la siguiente fuente de la familia * / font-size: 14px; / * Establece el tamaño de fuente global * / espaciado entre letras: 1px! Important; / * Efectos espaciado entre letras para todas las fuentes en la rueda * /
Seguiremos adelante y nos aseguraremos de que nuestra imagen central tenga el estilo correcto colocándola en el centro de la rueda utilizando márgenes, agregándole algunas dimensiones y un borde..
# menu-wrap .orbit height: 210px; margen: 32px; / * Empuja las imágenes en la pantalla hacia el centro * / position: absolute; ancho: 210px; # menu-wrap .orbit-frame border: 2px solid # 999; / * Crea una división entre la imagen y la envoltura5 * /
Todos los envoltorios: Queremos crear algunos estilos que se apliquen a todos los envoltorios principales agregando un radio de borde universal, colocándolos todos en el centro, agregando una posición relativa para que todo quede contenido y presionándolos hacia abajo para obtener la capa uniforme. efecto.
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder / * todos los contenedores de ruedas * / -moz-border-radius: 220px 0 200px 220px; / * firefox * / -webkit-border-radius: 220px 0 200px 220px; / * webkit * / border-radius: 220px 0 200px 220px; / * opera * / margin: 0 auto; / * Centra todos los envoltorios relativos entre sí * / posición: relativo! importante; / * No toque a menos que sepa lo que está haciendo * / top: 20px;
Esta es tu capa más grande que se encuentra detrás de todas las demás. Vamos a crear un fondo rojo degradado y utilizaremos un respaldo rojo sólido para los browers más viejos. También usaremos CSSpie para decirle a IE que está bien usar estos estilos. Después de eso, todo lo que tenemos que hacer es agregar un ancho y una altura y listo. Desea asegurarse de que el ancho y la altura sean más grandes que todas las demás capas para que se muestren detrás de ellas.
.wrap1 fondo: # FF0000; / * navegadores antiguos * / fondo: -moz-linear-gradient (top, # FF0000 0%, # 990000 100%); / * firefox * / background: -webkit-gradient (linear, left superior, left inferior, stop de color (0%, # FF0000), stop de color (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * ie * / background: gradiente lineal (arriba, # FF0000 0%, # 990000 100%); / * futuros navegadores CSS3 * / -pie-background: gradiente lineal (arriba, # FF0000 0%, # 990000 100%); / * Corrección de IE usando Pie * / altura: 394px; ancho: 394px;
Ahora para wrap 2 vamos a hacer exactamente lo mismo, solo usaremos variaciones de blanco como el degradado y agregaremos una sombra exterior e interior para crear un ligero efecto de bisel más la sombra de fondo. Luego debemos hacer que el ancho y la altura sean aproximadamente 40 px más pequeños que la capa principal para que sea agradable y uniforme..
.wrap2 fondo: #FFFFFF; / * navegadores antiguos * / background: -moz-linear-gradient (top, #FFFFFF 0%, # DCBE8F 100%); / * firefox * / background: -webkit-gradient (linear, left superior, left inferior, color-stop (0%, # FFFFFF), color-stop (100%, # DCBE8F)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FFFFFF", endColorstr = "# DCBE8F", GradientType = 0); / * ie * / background: gradiente lineal (arriba, #FFFFFF 0%, # DCBE8F 100%); / * futuros navegadores CSS3 * / -pie-background: gradiente lineal (arriba, #FFFFFF 0%, # DCBE8F 100%); / * Corrección de IE usando Pie * / altura: 354px; ancho: 354px; -moz-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0.6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) recuadro; -webkit-box-shadow: 15px 31px 19px 8px rgba (0, 0, 0, 0.6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) inset; caja-sombra: 15px 31px 19px 8px rgba (0, 0, 0, 0.6), 0 -30px 46px -1px rgba (0, 0, 0, 0.65) inserción;
Ahora repetiremos el proceso para todos los demás envoltorios usando gradientes de colores diferentes y haciendo que cada capa sea 40px más pequeña que la anterior.
.wrap3 fondo: # FF0000; / * navegadores antiguos * / fondo: -moz-linear-gradient (top, # FF0000 0%, # 990000 100%); / * firefox * / background: -webkit-gradient (linear, left superior, left inferior, stop de color (0%, # FF0000), stop de color (100%, # 990000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 990000", GradientType = 0); / * ie * / background: gradiente lineal (arriba, # FF0000 0%, # 990000 100%); / * futuros navegadores CSS3 * / -pie-background: gradiente lineal (arriba, # FF0000 0%, # 990000 100%); / * Corrección de IE usando Pie * / altura: 314px; ancho: 314px; .wrap4 border: 2px solid # FF0000; fondo: # 990000; / * navegadores antiguos * / fondo: -moz-linear-gradient (top, # 990000 0%, # CC0000 55%, # FF0000 57%); / * firefox * / background: -webkit-gradient (linear, left superior, left inferior, stop de color (0%, # 990000), stop de color (55%, # CC0000), stop de color (57%, # FF0000)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 990000", endColorstr = "# FF0000", GradientType = 0); / * ie * / background: gradiente lineal (arriba, # 990000 0%, # CC0000 55%, # FF0000 57%); / * futuros navegadores CSS3 * / -pie-background: gradiente lineal (arriba, # 990000 0%, # CC0000 55%, # FF0000 57%); / * Corrección de IE usando Pie * / -moz-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0.65), 1px 1px 0 2px rgba (125, 121, 32, 0.32) inset, 5px 5px 9px 6px inserción de rgba (221, 252, 116, 0,81); -webkit-box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32) inset, 5px 5px 9px 6px rgba (221, 252, 116, 0,81) inserción; box-shadow: 1px 1px 7px 2px rgba (0, 0, 0, 0,65), 1px 1px 0 2px rgba (125, 121, 32, 0,32), 5px 5px 9px 6px rgba (221, 252, 116, 0,81) ; altura: 274px; ancho: 274px;
Ahora podemos diseñar wrap5 y el soporte de navegación que mantendrá todos los elementos del menú en su lugar y para el estilo de caña de azúcar, lo convertiremos en negro para agregar un contraste neutro agradable, mientras que wrap5 será blanco y servirá como contenedor para el centro de la imagen. Lo que estamos haciendo aquí es recortar el fondo para que pueda ver a través de wrap5 y el soporte de navegación, haciendo que las otras capas aparezcan detrás de él, así como la imagen central. Después de hacerlo transparente, agregaremos un borde negro al soporte de navegación y un borde blanco para envolver5. El borde del soporte de navegación debe estar oculto en el lado derecho (para los submenús), doblado en el lado izquierdo (para los menús principales) y sólido para el resto, lo que crea un efecto agradable y fácil a la vez que minimiza la cantidad de capas añadir Tradicionalmente, con este efecto puedes agregar hasta 5 o 6 capas nuevas, esto ahorra mucho código.
Esta vez, el ancho y la altura de la envoltura será 60px menos que las otras capas para que sea agradable e incluso de nuevo. Otro empuje de 10 píxeles en la parte superior ayudará a alinear la capa y una sombra de la caja interna nos dará una buena perspectiva de la distancia entre la envoltura 5 y la imagen central.
Al agregar un top de 0 al navegador, se alinearán automáticamente las capas con las demás. También usaremos un margen negativo para una mayor alineación de la parte superior izquierda y crearemos una altura / anchura proporcional para que se ajuste bien sobre las otras capas.
.wrap5 -moz-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0.75), 5px 5px 5px 0 rgba (0, 0, 0, 0.75); -webkit-box-shadow: 9px 9px 5px 0 rgba (0, 0, 0, 0.75), 5px 5px 5px 0 rgba (0, 0, 0, 0.75); caja de sombra: 9px 9px 5px 0 rgba (0, 0, 0, 0.75) inserto, 5px 5px 5px 0 rgba (0, 0, 0, 0.75); borde: 20px sólido #FFF; / * crea la envoltura para ver la imagen detrás de ella * / altura: 214px; superior: 10px; / * Centrar el elemento * / ancho: 214px; .nav-holder fondo: ninguno repite el desplazamiento 0 0 transparente; color de borde: # 121212; / *** Las declaraciones de borde se utilizan para crear la envoltura final, la parte central se ve a través y oculta el borde derecho para mostrar los submenús * / border-style: doble sólido sólido oculto; ancho del borde: 73px medianas 73px 73px; altura: 252px; margen: -92px; / * centra el objeto en elementos relativos * / top: 0; ancho: 324px;
"El borde del soporte de navegación debe estar oculto en el lado derecho (para los submenús), doblado en el lado izquierdo (para los menús principales) y sólido para el resto, creando un efecto agradable y fácil a la vez que minimiza la cantidad de capas que Hay que añadir ".
Bueno, eso fue bastante fácil. Entonces, después de que hayas terminado todo eso, es de esperar que hayas aprendido algo nuevo para agregar a tu conjunto de habilidades. Sin embargo, esto es lo que debe ser su creación hasta ahora. Si no se ve así, vuelva a revisar el código y vea si se le ha pasado algo. no te preocupes, probablemente sea algo muy menor.
Los completantes: ¿Hmm? ¿Esto te parece incompleto? Tenemos que rematarlo con un par de capas a las que he llamado completadores, de modo que podamos ocultar partes de la imagen central y llevar el soporte de navegación alrededor de las otras capas, creando un bonito efecto redondeado y cerrándolo..
Hacer lo que acabo de mencionar es bastante simple. Podemos hacer que la mayoría del estilo se aplique a ambos completadores por menos código. Agreguemos un radio de borde a un lado para hacer una buena curva, luego usaremos la transformación para alinear el completador entre wrap1 y wrap5. Agregar nuestro color de fondo es muy importante o nada aparecerá. Tenemos que hacer que esta capa sea absoluta y moverla hacia la derecha y la parte superior para alinearla perfectamente..
.completer1 tendrá una visualización de ninguno para este estilo de lágrima. En otros estilos, como la rueda, hemos eliminado esa parte para hacer que se muestre.
.completer2 tiene un poco más de rotación y necesitamos empujarlo hacia abajo un poco para que encaje.
.completer, .completer2 / ** elementos absolutos para ocultar el borde de las imágenes ** / -moz-border-radius: 0 120px 0 113px; / * firefox * / -webkit-border-radius: 0 120px 0 113px; / * webkit * / border-radius: 0 120px 0 113px; / * opera * / -moz-transform: rotate (-20deg); / * firefox * / -webkit-transform: rotate (-21deg); / * webkit * / -o-transform: rotate (-20deg); / * opera * / -ms-transform: rotate (-20deg); / * ie9 y versiones futuras * / transform: rotate (-20deg); / * navegadores más antiguos * / background-color: # 121212; imagen de fondo: ninguna; posición de fondo: 0 0; Repetición de fondo: repetir; altura: 135px; posición: absoluta; derecha: -24px; arriba: -56px; ancho: 130px; .completer mostrar: ninguno; .completer2 -moz-transform: rotate (110deg); / * firefox * / -webkit-transform: rotate (111deg); / * webkit * / -o-transform: rotate (110deg); / * opera * / -ms-transform: rotate (110deg); / * ie9 y versiones futuras * / transform: rotate (110deg); / * navegadores más antiguos * / top: 195px;
Después de haber agregado los completadores, entonces debería tener algo como esto? Nuevamente, si no tiene lo mismo que lo que ve aquí, simplemente revise su código y vea lo que se perdió..
Ahora tenemos un gran conjunto de capas para trabajar. Todos están bien contenidos y tienen suaves efectos CSS3, así que sigamos adelante y pongamos a trabajar a este bebé.!
Ahora queremos agregar enlaces de navegación que se vean como detrás de capas diferentes. En el lado izquierdo (en el borde doble) queremos los elementos del menú principal y en el lado derecho (en el espacio abierto) queremos que los elementos del submenú aparezcan después de que se desplace un elemento principal. Se sorprenderá de lo fácil que es esto, así que vamos a profundizar.
Existe un bloque flotante para mantener los menús activos mientras pasa el volante con el mouse y queremos asegurarnos de que cubra todo el volante, por lo que, por compatibilidad con IE, agregaremos un fondo con una opacidad de 0.01, de lo contrario IE ganó. No reconozco que el elemento está incluso allí..
Usando el margen izquierdo: 76px garantiza que tenga suficiente espacio para desplazarse sobre el menú principal y el submenú, así como para cruzar el volante sin que desaparezca nada.
ul.menuBuild, ul.menuBuild ul width: 80px; / * establece el tamaño de los bloques de menú * / background: rgb (0, 0, 0); / * RGBa con 0.01 opacidad * / fondo: rgba (0, 0, 0, 0.01); / * - ¡DEBE incluir un bg-color para que IE funcione correctamente! * / padding-left: 0px; / * detiene la sangría usual de ul * / margin-left: 76px; / * El modelo de margen y caja de margen de Opera 7 final causa problemas * /
Ahora queremos eliminar las viñetas de cada elemento del menú o [li]. También queremos asegurarnos de que sean relativos al titular de la navegación..
Puedes agregar un radio de borde para un poco más de estilo. Haremos que el fondo sea de un color uniforme y moveremos los elementos del menú a la izquierda para que apenas toquen los bordes del soporte de navegación..
El relleno, la sangría del texto y el color son para un estilo adicional y no son necesarios para que el menú funcione.
ul.menuBuild li list-style-type: none; / * elimina las viñetas * / position: relative; -webkit-border-radius: 0px 20px 20px 0px; / * navegadores webkit * / -moz-border-radius: 0px 20px 20px 0px; / * firefox * / border-radius: 0px 20px 20px 0px; / * opera * / background: ninguno repite scroll 0 0 # 464646; altura: 14px; izquierda: -177px; relleno: 8px; margen: 6px 0 0; ancho: 140px; texto-sangría: 5px; / * A qué distancia está el texto del borde izquierdo del menú * / color: #fff; / * establece el color de fuente predeterminado en blanco * /
Ahora agreguemos un poco de degradado a los submenús y empujémoslo hacia la derecha y golpeamos el primer elemento del submenú apenas hasta el borde de la envoltura5.
Agregar una sombra de cuadro nos ayudará a crear el efecto de los elementos del submenú que están debajo de sus capas respectivas.
ul.menuBuild ul.submenu li background: # f2f2f2; / * navegadores antiguos * / fondo: -moz-linear-gradient (left, # 565656 0%, # 666 3%, #FFF 14%); / * firefox * / background: -webkit-gradient (linear, left superior, right superior, stop de color (0%, # 565656), stop de color (3%, # 666), stop de color (14%, # FFF)); / * webkit * / background: url (bg-image.png) sin repetición, gradiente lineal (izquierda, # 565656 0%, # 666 3%, #FFF 14%); / * futuros navegadores CSS3 * / -pie-background: url (bg-image.png) sin repetición, gradiente lineal (izquierda, # 565656 0%, # 666 3%, #FFF 14%); / * PIE * / / * filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e7e7e7", endColorstr = "# FFF", GradientType = 1); * / / * ie * / color: # 464646; posición: relativa; izquierda: 296px; / * Así es como el menú termina en el otro lado de la rueda * / -webkit-box-shadow: -2px 3px 12px -7px # 161616; / * navegadores webkit * / box-shadow: 16px 0 10px -8px # 464646 inset; / * opera * / -moz-box-shadow: -2px 3px 12px -7px # 161616; / * firefox * /
Poner márgenes en cada elemento del submenú nos permitirá crear más separación y dar el efecto de que cada uno esté debajo de una capa diferente.
También puede agregar una opacidad para cada elemento para que se desvanezca de arriba a medio y de abajo a medio donde el elemento central tiene una opacidad total.
ul.menuBuild ul.submenu li.first margin-left: -12px; opacidad: 0,70; ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third margen izquierdo: -12px; opacidad: 0,85; ul.menuBuild ul.submenu li.last margin-left: 55px; opacidad: 0,70;
Ok, ha agregado su submenú pero aún se muestra sin que el menú principal se desplace por encima. Para solucionar este problema, simplemente debemos agregar una visualización a la [ul].
ul.menuBuild li> ul / * usando el selector> evita que muchos navegadores más pequeños (y IE - ver más abajo) ocultan los ULs secundarios * / display: ninguno; / * hacer que los bloques secundarios se desplacen sin dejar espacio para ellos * / top: -169px; posición: absoluta; derecha: -86px; color: # 565656; ancho: 160px; -webkit-border-radius: 0 4px 4px 0; / * webkit * / -moz-border-radius: 0 4px 4px 0; / * firefox * / border-radius: 0 4px 4px 0; / * opera * / padding: 50px; altura: 24px; fondo: rgb (255, 255, 255); / * Fallback para los navegadores web que no admiten RGBa * / background: rgba (255, 255, 255, 0.00); / * RGBa con 0.01 opacidad * /
Así que ahora no aparece en absoluto! Bien, sigamos adelante y hagamos que se muestre después de que un elemento principal esté sobre el mismo. Al usar li: hover> ul, podemos decir que cuando se desplaza un menú principal [li], entonces mostraremos la [ul] para el submenú apropiado mediante el uso de display: block.
ul.menuBuild li: hover> ul / * una de las declaraciones más importantes: el navegador debe detectar el cernido sobre elementos arbitrarios, los> solo se enfoca en el niño ul, no en las nulas de ese niño ul * / display: block; / * hace que el bloque hijo sea visible - una de las declaraciones más importantes * / position: absolute; izquierda: 0; ancho: 400px; altura: 200px;
Para una estética pura, podemos agregar un radio de borde, un cuadro de sombra y un fondo. Lo que se necesita es crear la altura, el ancho, la posición absoluta y el margen superior.
El margen superior nos permite empujar el primer elemento del menú hacia abajo hasta donde lo deseamos, luego podemos usar menos margen para empujar hacia abajo el resto de los elementos..
ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4 -webkit-border-radius: 20px 0 0 20px; / * webkit * / -moz-border-radius: 20px 0 0 20px; / * firefox * / border-radius: 20px 0 0 20px; / * opera * / -webkit-box-shadow: -2px 7px 8px -7px # 161616; / * webkit * / -moz-box-shadow: -2px 7px 8px -7px # 161616; / * firefox * / box-shadow: -16px 0 8px -7px # 222222 inset; / * opera * / background: # F0000F; / * navegadores antiguos * / fondo: -moz-lineal-gradiente (izquierda, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100 %); / * firefox * / background: -webkit-gradient (linear, left superior, right superior, stop de color (52%, # F0000F), stop de color (60%, # CC0000), stop de color (84%, # 990000), color stop (84%, # FFF), color stop (85%, # 464646), color stop (92%, # 363636), color stop (100%, # 121212)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# F0000F", endColorstr = "# 121212", GradientType = 1); / * ie * / background: gradiente lineal (izquierda, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * futuros navegadores CSS3 * / -pie-background: gradiente lineal (izquierda, # F0000F 52%, # CC0000 60%, # 990000 84%, #FFF 84%, # 464646 85%, # 363636 92%, # 121212 100%); / * Corrección de IE usando Pie * / altura: 18px; relleno: 8px; posición: absoluta; margen superior: 100px; ancho: 138px;
Para los 3 elementos de menú restantes, agregaremos un margen superior a cada uno para lograr un espaciado uniforme entre ellos y un margen izquierdo para golpearlos contra las diferentes capas..
A continuación, debemos asegurarnos de agregar la rotación a cada elemento para que podamos ajustar el menú alrededor de la rueda..
ul.menuBuild li # menu2 -webkit-transform: rotate (-10deg); / * webkit * / -moz-transform: rotate (-10deg); / * firefox * / -o-transform: rotate (-10deg); / * opera * / -ms-transform: rotate (-10deg); / * ie9 y versiones futuras * / transform: rotate (-10deg); / * navegadores más antiguos * / margin-top: 141px; margen izquierdo: 5px; ul.menuBuild li # menu3 -webkit-transform: rotate (-21deg); / * webkit * / -moz-transform: rotate (-21deg); / * firefox * / -o-transform: rotate (-21deg); / * opera * / -ms-transform: rotate (-21deg); / * ie9 y versiones futuras * / transform: rotate (-21deg); / * navegadores más antiguos * / margin-top: 181px; margen izquierdo: 18px; ul.menuBuild li # menu4 -moz-transform: rotate (-32deg); / * firefox * / -ms-transform: rotate (-32deg); / * ie9 y versiones futuras * / transform: rotate (-32deg); / * navegadores más antiguos * / -webkit-transform: rotate (-32deg); / * webkit * / -o-transform: rotate (-32deg); / * opera * / margin-top: 218px; margen izquierdo: 38px;
Después de ocuparnos de los elementos del menú principal, haremos lo mismo para el submenú, excepto que, en lugar de hacer que los elementos del menú giren la rueda, queremos que estén arriba y abajo. Para hacer esto, necesitamos compensar la rotación del menú principal agregando una rotación a cada submenú.
Igual que el menú principal, necesitamos agregar un margen superior para nivelar el espacio entre cada uno y empujar cada elemento del submenú hacia la derecha para que estén aún más cerca de sus respectivas capas.
ul.menuBuild li # menu1> ul margin-top: 0; izquierda: 20px; ul.menuBuild li # menu2> ul -webkit-transform: rotate (10deg); / * webkit * / -moz-transform: rotate (10deg); / * firefox * / -o-transform: rotate (10deg); / * opera * / -ms-transform: rotate (-10deg); / * ie9 y versiones futuras * / transform: rotate (-10deg); / * navegadores antiguos * / left: 24px; margen superior: 6px; ul.menuBuild li # menu3> ul -webkit-transform: rotate (21deg); / * webkit * / -moz-transform: rotate (21deg); / * firefox * / -o-transform: rotate (21deg); / * opera * / -ms-transform: rotate (-21deg); / * ie9 y versiones futuras * / transform: rotate (-21deg); / * navegadores más antiguos * / izquierda: 27px; margen superior: 16px; ul.menuBuild li # menu4> ul -webkit-transform: rotate (32deg); / * webkit * / -moz-transform: rotate (32deg); / * firefox * / -o-transform: rotate (32deg); / * opera * / -ms-transform: rotate (32deg); / * ie9 y versiones futuras * / transform: rotate (32deg); / * navegadores antiguos * / left: 28px; margen superior: 27px;
Finalmente, podemos agregar un estilo opcional para hacer que las fuentes se desvanezcan y luego vuelvan a ser sólidas cuando se coloca el mouse sobre ellas. Esto traerá cada elemento al frente para el usuario cuando se desplace sobre él..
Estos estilos no son necesarios para que el menú funcione, pero sí agregan algunos efectos agradables y aumentan la facilidad de uso..
ul.menuBuild ul.submenu li a color: # 464646; / * el color de las fuentes del submenú * / opacidad: 0.65; / * Esto combina la fuente con el fondo * / filter: alpha (opacidad = 65); ul.menuBuild ul.submenu li a: hover opacity: 1.0; / * y esto hace que la opacidad de la fuente vuelva al 100% * / filter: alpha (opacity = 100) ul.menuBuild li a / * para los enlaces del menú principal * / color: # FFBE8F; bloqueo de pantalla; ancho: 100%; ul.menuBuild li: hover> a color: #fff; borde izquierdo: doble 5px # 880000; / * el indicador para cuando un elemento se desplaza sobre * / / * no usa display: block; * /
Si desea personalizar aún más cada submenú individual, puede utilizar el siguiente código?
.sub1, .sub2, .sub3, .sub4
Después de que hayas terminado la última parte, deberías tener algo como esto? Una vez más, si la suya no se parece a la imagen de abajo, no se preocupe, simplemente regrese y verifique su código.
Créditos: La imagen del centro es de la biblioteca de activos de envato..
Bueno, para IE podemos usar CSSPIE en una hoja de estilo separada. No voy a entrar mucho en eso porque incluso con esta solución, IE no se muestra correctamente. Si sabe de una mejor solución, hágamelo saber en los comentarios..
Usando el comportamiento, podemos llamar al archivo csspie php para decirle a IE que los estilos CSS3 están bien para usar. Así es como funcionará?
ul.menuBuild ul.submenu li, ul.menuBuild ul.submenu li.first, ul.menuBuild ul.submenu li.second, ul.menuBuild ul.smenmen li.third, ul.menuBuild ul.submenu li.last, ul. menuBuild li> ul, ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu1, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu2, ul.menuBuild li # menu3, ul.menuBuild li # menu4, ul.menuBuild li # menu2> ul, ul.menuBuild li # menu3> ul, ul.menuBuild li # menu4> ul, .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder, .completer, .completer2 comportamiento: url (styles / csspie / PIE.php); / * Corrección CSS3 IE - Soporta 'border-radius', 'box-shadow', 'border-image', -pie-background ', liinear-gradients', 'RGBA' * /
Algunas otras correcciones de IE van así?
ul.menuBuild ul.submenu li filter: alpha (opacity = 70); / * IE tiene demasiados problemas para la opacidad gradual, por lo que solo usaremos 70 para todos los submenús * / .completer, .completer2 display: none; / * la transformación no funciona correctamente, así que solo ocultaremos los completadores * / .nav-holder border-bottom-style: none; altura: 0px;
¡Espero que hayan disfrutado este tutorial! Recuerde que la compatibilidad con CSS3 es limitada y si desea que se cree la compatibilidad con todos los navegadores, existen otras formas de realizar la misma tarea, como usar imágenes y algunos javascript. Si desea un tutorial sobre los otros estilos de menú, cómo usar la versión de javascript o simplemente cómo usar más efectos CSS3 impresionantes, hágamelo saber en los comentarios y los prepararé para usted.! Deja tus comentarios y preguntas a continuación ;)
Sé paciente y sigue aprendiendo, y antes de que te des cuenta serás un maestro en lo que sea que hagas.!
