Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Cómo crear un Menú de Rueda con CSS3

by
Length:LongLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

No hay otra manera para aprender CSS3 que ensuciarte las manos en un proyecto y eso es exactamente lo que vamos a hacer. Voy a enseñarle cómo crear un asombroso, menú giratorio en CSS3, usando algunas técnicas principiantes como avanzadas. Así que sálgase con su editor de texto o IDE favorito y ¡empecemos a hacer algo de magia!

Hoy aprenderá a cómo crear un bastón de caramelo en forma de lágrima de los diferentes estilos y variaciones de color disponibles. Usted recibirá todas las variaciones en los archivos fuentes. Además, como bono adicional he agregado un poco de código JavaScript, opcional para que pueda rotar sus imágenes dependiendo del ítem del menú sobre el que se coloque el cursor. ¡Los archivos fuentes, incluso vienen con su propia documentación!

Nota: Soporte para Internet Explorer está limitado en este momento. Principalmente lo haremos a través de éste por el propósito de impulsar la envoltura con lo que podemos hacerlo en CSS3… sin embargo, como con todas las cosas al limite de la práctica, esto significa sacrificar un poco de estabilidad. ¡Aunque abordaremos el tema IE al final del tutorial!


El vídeo tutorial

Estamos ofreciendo este tutorial en dos formatos diferentes el día de hoy: Un vídeo así como también un tutorial completamente escrito como el que podrá leer a continuación. Puede continuar con el método de aprendizaje que usted prefiera (¡o puede utilizar los dos!) y llegar hasta el final rápidamente.


El tutorial escrito

El tutorial escrito paso a paso está a continuación. ¡Asegúrese de conseguir la versión que puede descargar por completo!


Paso 1: Las Capas

Lo primero que tenemos que hacer es crear algunas capas que se van a superponer una sobre la otra en su lugar mientras usamos tan poco código como sea posible. Es importante no llegar su código con mucho código inicial y tampoco con mucho
elementos flotando innecesariamente o posicionados con la opción absoluta, por lo tanto, trataremos de usar la posición relativa tanto como sea posible.

El Código:

Como puede ver el código es bastante sencillo. Básicamente, tenemos una capa colocada encima de la otra y de esta manera podrán mantener su posición.

A continuación queremos agregar una imagen al centro de la rueda, o en este caso, de la forma de la gota. Para hacer eso, sencillamente vamos a añadir el siguiente código entre la clase wrap4 y la clase completer. Esto bloqueará la imagen al centro del área de trabajo. Para esto, simplemente usaremos una imagen Estupenda, ¡porque son magníficas!

Ahora añadiremos algo de estilo para cada capa una por una.

#menu-wrap:

Éste será el contenedor principal para su menú giratorio. Además, contiene cualquier fuente universal y efectos de tamaño de fuente que está dentro de la etiqueta div id="menu-wrap".

Continuaremos y nos aseguraremos de que la imagen al centro tiene el estilo correcto al colocarla en el centro de la rueda usando la propiedad márgenes, añadiendo algo de dimensiones a él y, también, un borde.

Todas las envolturas: Queremos crear algunos estilos que se aplicarán a todas las envolturas al colocar la opción universal: borderr-radius, poniéndolos todos en el centro, agregando una posición relativa para que todo quede contenido y empujarlos hacia abajo para conseguir aún más el efecto escalonado.

.wrap1:

Esta es una de las capas más grandes que está colocada detrás de las demás. Vamos a crear un fondo degradado de color rojo y, además, usaremos un color sólido rojo como segunda opción para los navegadores antiguos. Además, usaremos CSSpie para decirle a IE que está bien usar estos estilos. Después de eso, todo lo que necesitamos hacer es agregar una anchura y una altura y habrá terminado. Si quiere asegure que la anchura y la altura son más grandes de todas las otras capas para que éste se muestra detrás de ellos.

.wrap2:

Ahora, para wrap2, vamos a hacer exactamente lo mismo, solamente que esta vez usaremos variaciones de color blanco para el degradado, y agregaremos una sombre interna y externa para crear un pequeño efecto de biselado más la sombra paralela. Después, necesitamos hacer la anchura y la altura a unos 40px más pequeños que la capa principal para hacerlo incluso más bonito.

.wrap3 & 4:

Ahora repetiremos el proceso para las demás envolturas usando diferentes colores para los degradados y haciendo cada capa 40px más pequeña que la anterior.

.wrap5 & .nav-holder:

Ahora podemos aplicar estilo al wrap5 y al nav-holder los cuales mantendrán todos los ítem del menú en su orden y para el estilo de bastón de caramelo, lo haremos de color negro para añadir un contraste neutral mientras wrap5 será blanco y servirá como el contenedor para la imagen del centro. Lo que vamos a hacer aquí es recortar el fondo para que pueda ver a través de wrap5 y nav-header, haciendo que las otras capas aparezcan detrás de él así como también la imagen del centro. Después de hacerlo transparente, agregamos un borde de color negro al elemento nav-holder y un borde blanco a wrap5. El borde de nav-holder deberá estar oculto al lado derecho (para los sub-menús), duplicados al lado izquierdo (para el menú principal) y sólidos para el resto, creando un efecto bonito, mientras tanto reduce la cantidad de capas que necesitamos que agregar. Normalmente, con este efecto usted podría añadir más de 5 o 6 capas nuevas y esto ahorra muchísimo código.

Esta vez, la anchura y la altura de wrap5 será 60px menos que las otras capas para hacerlo, incluso, más bonito. Otros 10px más en la parte de arriba ayudará a alinear la capa y una sobra interna nos dará una excelente perspectiva de distancia entre wrap5 y la imagen del centro.

Al añadir una altura de 0 al elemento nav-header, automáticamente, alineará las capas con las demás. También usaremos márgenes para más alineación en la parte superior izquierda y crear una altura y anchura proporcional, para hacerlo encajar bien arriba de las demás capas.

"El borde del elemento nav-holder deberá estar oculto al lado derecho (para los sub menús), doblado al lado izquierdo (para los menú principales) y sólido para el resto, creando un efecto excelente mientras reduce la cantidad de capas que necesitamos añadir.

Bueno, eso fue bastante fácil. Después de haber terminado todo eso, seguramente, usted aprendió algo nuevo para añadirlo a su conjunto de habilidades. Sin embargo, así es cómo su creación debería de verse hasta el momento. Si no luce igual, por favor, diríjase de nuevo al código y mire si se le ha pasado por alto algo…, es probable que sea algo menor. 

Los completadores: Hmm…, ¿acaso esto luce incompleto para usted? Necesitamos culminar esto con un par de capas a las que he llamado los completadores para que podamos ocultar partes de la imagen del centro y traer el elemento nav-header alrededor de las otras capas, creando un singular efecto redondeado y cerrarlo.

Para hacer lo que acabo de mencionar es bastante sencillo. Podemos hacer la mayoría de los estilos que vamos a aplicar a los completadores para tener menos código. Comencemos añadiendo la opción border-radius a un lado para hacer una curva nítida, luego usaremos las propiedades de transformación para alinear el completer entre wrap1 y wrap5. Añadir nuestro color de fondo es muy importante o no se verá nada. Tenemos que la opción de posición de esta capa sea absolute y, luego, la moveremos a la derecha y hacia arriba para alinearla pefectamente. 

.completer1 tendrá como valor para la opción display = none, para este estilo de la forma de lágrima. En otros estilos tales como la rueda, hemos borrado esa para hacer que esto se muestre.

.completer2, tiene un poco más de rotación y necesitamos empujarlo un poco hacia abajo para hacerlo encajar.

Después de que añadió los completers, debería de tener algo como esto… Nuevamente, si usted no tiene lo mismo que ve aquí, solamente revise su código y lo que perdió.

Ahora tenemos un excelente conjunto de capas con que trabajar. Todas están contenidas de una manera notable y tiene un efecto CSS3 uniforme, ¡así que vamos a continuar y a hacer que este bebe funcione!


Paso 2: Los Item de la Navegación y los ítems del Sub Menú.

Ahora queremos añadir los enlaces para la navegación que lucen como estuvieran detrás en diferentes capas. En el lado izquierdo (en el borde doblado) queremos los ítem del menú principal y al lado derecho (en el espacio abierto) queremos los item del sub-menú para que aparezcan después de que haya sido colocado el cursos sobre uno de los ítem del menú principal. Se sorprenderá de lo fácil que es hacer esto, así que comencemos. 

El código:

Hay un bloque que mantendrá los menús activos mientras usted pase el cursor sobre la rueda y queremos garantizar que cubre la rueda por completo, así que en pro de la compatibilidad con IE, agregaremos un fondo con una valor para la opción Opacity, de 0.01, porque de otro forma, Internet Explorer no reconocerá que el elemento está ahí.

Usando la opción margin-left: 76px, garantiza que usted tiene suficiente espacio para colocar el cursor sobre el menú principal y el sub menú, así como también atravesar la rueda sin que nada desaparezca. 

Ahora queremos eliminar los puntos de viñetas de cada uno de los ítem del menú o (de los elementos li). Además, queremos estar seguros de que tienen una posición relativa al objeto nav-holder.

Usted puede aplicar la opción border-radius para añadir un estilo extra. Haremos que el color de fondo sea sólido y moveremos los item del menú a la izquierda de modo que apenas estén tocando los bordes del objeto nav-holder.

Las opciones padding, text-indent y color son para agregar un estilo extra y no se necesitan para la función del menú.

Ahora, agreguemos un poco de degradado a los sub-menús y empujemos lo hacia la derecha y que golpee el prime elemento del sub-menú apenas el borde de wrap5.

Añadir una sombra paralela nos ayudará a crear el efecto de los elementos del sub-menú que están debajo de sus respectivas capas.

Poniendo márgenes en cada elemento del sub-menú nos permitirá crear más separación y darle el efecto a cada uno que está debajo en una capa diferente.

Además, puede agregar una Opacity para cada elemento para hacerlo desvanecerse desde la parte de arriba hasta el medio y desde la parte de abajo hasta el medio en donde el elemento del medio tiene la Opacity completa.

De acuerdo, así que ha añadido su sub-menú, pero aún se muestra sin que ningún menú principal sea afectado cuando el cursor pasa encima de él. Bueno, para arreglar esto, tenemos que agregar el valor none a la opción display de la etiqueta (ul).

¡Ahora no se ven para nada! Esta bien, vamos a continuar y hacer que se muestre después de que el cursor pasa sobre un elemento del menú principal. Usando li:hover > ul, podemos hacer eso cuando se pasa el cursor sobre un un elemento (li) del menú principal, luego mostraremos la etiqueta (ul) para el sub-menú correspondiente usando la opción: display=block.

Aplicando estilo a cada elemento del menú principal.

Por pura estética, podemos añadir un border-radius, también un box-shadow y un background, para el color de fondo. Lo que sí es necesario es crear la altura, anchura y aplicar la posición absolute y el margen a la parte superior. 

El margen superior nos permitirá empujar el primer elemento del menú hacia abajo, hacia donde queremos, después podemos usar menos margen para empujar hacia abajo el resto del los elementos.

Para los 3 elementos que aún quedan, vamos a agregar un margen superior para cada uno un espacio uniforme entre ellos y un margen izquierdo para que los golpee contra las diferentes capas.

Después necesitamos añadir para garantizar que añadimos la rotación para cada elemento para que podemos adaptar el menú alrededor de la rueda.

Después de ocuparnos de los elementos del menú principal, vamos a hacer lo mismo para el sub-menú, excepto que en lugar de hacerlo a los elementos del menú alrededor de la rueda, queremos que sea recto de arriba hacia abajo. Para hacer esto necesitamos equilibrar la rotación del menú principal añadiendo una rotación para cada sub-menú.

Igual que con el menú principal, necesitamos agregar un margen superior igualar el espacio entre cada uno y empujar cada elemento del sub-menú a la derecha para que se acerquen más a sus respectivas capas.

Finalmente, podemos añadir algunos estilos opcionales para hacer que las fuentes se desvanezcan y luego hacer que se vuelvan sólidas de nuevo cuando el cursor pase sobre ellas. Esto traerá cada elemento hacia el frente para el usuario, cuando el cursor esté sobre ellos.

Estos estilos no son necesarios para la función del menú, sin embargo, añaden algunos efectos interesantes e incrementan la funcionalidad.

Si desea un estilo adicional para cada sub-menú individual, usted puede usar el siguiente código….

Después de que ha terminado la última parte, deberá de tener algo como esto… Una vez más, si el suyo no luce igual a la imagen que está debajo, entonces no se preocupe, sencillamente, regrese y revise su código.

Créditos: La imagen del centro es parte de la biblioteca de recursos de Envato.


¿Qué pasa con Internet Explorer?

Bien, para IE, podemos usar CSSPIE, en una hoja de estilos separada. No entraré en muchos detalles porque incluso con está adaptación para IE, no se mostrará de forma adecuada. Si usted conoce una mejor opción, por favor, déjeme saber cómo dejando su comentario en la sección de comentarios.

Usando behavior, podemos llamar el archivo php: csspie, para decirle a IE que los estilos CSS3 están listos para usarse. Por lo tanto, así es cómo funcionará….

Algunos ajustes más para IE irán así….


¡Está todo hecho!

¡Espero que hayan disfrutado el tutorial! Recuerde que el soporte para CSS3 es limitado y si usted quiere compatibilidad a través de todos los navegadores que se han creado, entonces recuerde que hay otras formas para lograr la misma tarea como usar imágenes, por ejemplo, y algo de JavaScript. Si le gustaría un tutorial sobre los otros estilos de menú, cómo usar la versión JavaScript o sencillamente, cómo  usar más efectos CSS3 asombrosos, déjeme saberlo en la sección de comentarios y haré algunos para usted. Dejé sus comentarios y preguntas debajo ;)

Sea paciente y continué aprendiendo y antes de que se de cuenta, ¡será un maestro en lo que sea que usted haga!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.