Las limitaciones están casi siempre en nuestra imaginación así que probad cosas básicas sin miedo y luego evolucionarlas con variaciones. Eso fue lo que me pasó cuando monté estos menús circulares desplegables.
Inicialmente fue un intento de disponer una serie de dibujos sobre un imaginario segmento de circunferencia, pero enseguida me di cuenta de que con poco más, podía hacer lo mismo para construir un menú algo distinto a lo habitual. Incluso dos. Los veremos al final.
La cosa comienza con una caja dónde incluimos tantas cajas más como elementos queramos mostrar. En este caso lo he hecho con etiquetas ;span, pero podría ser con cualquier otra.
<div class="estrellas">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
La caja principal tendrá unas propiedades sencillas, las típicas de un contenedor y sólo necesitamos ineludiblemente un position: relative para poder situar después adecuadamente las cajas interiores.
.estrellas {
position: relative;
width: 520px;
height: 300px;
margin: 0 auto;
font-size: 70px;
}
position: relative;
width: 520px;
height: 300px;
margin: 0 auto;
font-size: 70px;
}
Las cajas interiores tendrán un posicionamiento absoluto para que coincidan todas en el mismo espacio. Nos las llevamos abajo del todo con un bottom: 0 y las centramos con el 50% en el left y una corrección con un margin-left negativo con valor la mitad del ancho del elemento.
Adicionalmente les damos un alto suficiente y para que su contenido salga abajo del todo, forzamos un line-height grande con la ecuación que se indica en el comentario correspondiente. El transform-origin arriba y en el centro nos marcará el punto de apoyo desde el cual moveremos después cada elemento, a modo de punta (la de metal) de un compás.
Ese borde azul que puse es sólo para que se visualice como queda cada caja interior y entender mejor el truco haciéndolo visible, así que si usáis esto alguna vez lo deberéis eliminar.
.estrellas span {
position: absolute;
bottom: 0;
left: 50%;
width: 70px;
height: 300px;
margin-left: -35px;
line-height: 530px; /* height*2 - font-size */
text-align: center;
transform-origin: top center;
border: 1px solid blue;
}
position: absolute;
bottom: 0;
left: 50%;
width: 70px;
height: 300px;
margin-left: -35px;
line-height: 530px; /* height*2 - font-size */
text-align: center;
transform-origin: top center;
border: 1px solid blue;
}
De momento sólo tendremos esto, siete cajas solapadas una encima de la otra con una altura de 300px y con el contenido abajo del todo. Evidentemente, el solapamiento sólo nos permite ver una, pero os prometo que aquí debajo hay 7:
★
★
★
★
★
★
★
★
★
★
★
★
★
Ya sólo nos queda un paso y es indicar el giro que queremos para cada elemento, siendo este distinto para cada uno de manera que tengamos un despliegue regular. Esto lo hacemos con nth-of-type lo que nos permite seleccionar cada elemento por su número de orden según aparición en el flujo de código:
.estrellas span:nth-of-type(1) {
transform: rotate(75deg);
}
.estrellas span:nth-of-type(2) {
transform: rotate(50deg);
}
.estrellas span:nth-of-type(3) {
transform: rotate(25deg);
}
.estrellas span:nth-of-type(4) {
transform: rotate(0deg);
}
.estrellas span:nth-of-type(5) {
transform: rotate(-25deg);
}
.estrellas span:nth-of-type(6) {
transform: rotate(-50deg);
}
.estrellas span:nth-of-type(7) {
transform: rotate(-75deg);
}
transform: rotate(75deg);
}
.estrellas span:nth-of-type(2) {
transform: rotate(50deg);
}
.estrellas span:nth-of-type(3) {
transform: rotate(25deg);
}
.estrellas span:nth-of-type(4) {
transform: rotate(0deg);
}
.estrellas span:nth-of-type(5) {
transform: rotate(-25deg);
}
.estrellas span:nth-of-type(6) {
transform: rotate(-50deg);
}
.estrellas span:nth-of-type(7) {
transform: rotate(-75deg);
}
Y sólo con eso ya tendremos una disposición circular para cualquier conjunto de textos o imágenes que queramos mostrar de esa manera. Repito que el borde azul es sólo para visualizar el método.
★
★
★
★
★
★
★
★
★
★
★
★
★
A partir de aquí ya podemos usar este truco como queramos, aplicándolo por ejemplo a listas de enlaces (menús) y haciendo que se desplieguen al pasar el puntero por encima en lugar de mostrarlo ya desplegado. Estos serían un par de ejemplos que usan el mismo sistema. Bajo ellos los enlaces para ver los códigos utilizados.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Que chulo y original, gracias!
ResponderEliminarPues hombre, para disgusto de momento lo de suprimir hoy el gadget de seguidores... :(
ResponderEliminar¿Seguro que desapareció? Prueba a ir a Diseño, "Añadir Gadget" y elige la segunda opción "Más gadgets". Debería aparecer el primero (Seguidores). Instala ese y me cuentas.
EliminarYo he probado el código conforme lo has expuesto tú y no ha funcionado.
ResponderEliminarFinalmente he usado el que has linkeado al final y ese sí funciona, es bastante más complejo de lo que lo has intentado hacer parecer.
Ventura, no he pretendido hacer parecer fácil lo difícil ni nada parecido. El código completo es el que figura en las demos de CodePen y el artículo sólo intenta explicar cómo colocar una serie de elementos sobre una curva. Hasta ahí llega la explicación.
EliminarLa segunda parte es para que veais que a partir de eso se pueden hacer diversos diseños y que además, añadiendo reglas a los :hover, se pueden "animar" esos elementos. Eso ciertamente no lo expliqué con detalle, pero pienso que así os fuerzo un poco a que tengáis que estudiar el código para ver cómo se hacen ciertas cosas.
¡Increíble! ¡Genial! Me encantaría tener tanta desenvoltura con el CSS, saber Javascript y PHP y muchas cosas más.
ResponderEliminarPor ahora uso el CSS y cada vez descubro más y nuevas etiquetas, en eso no tengo problema.
Lo que no acabo de entender es la estructura de Blogger, lo primero, y lo segundo, la forma en la que se pueden estructurar las clases en el CSS, porque, veo que salen «.clase1.clase2», también veo que ponen «.clase1 clase2 li .otraclase», y muchas combinaciones así, no entiendo cuando aparecen juntas, sí entiendo cuando aparecen separadas por comas pues que le quieren aplicar los mismos estilos.
Por ejemplo aquí, entiendo que a la etiqueta span dentro de la clase .estrellas le das estilo. La propiedad «nth-of-type» ni idea de que existía.
Ahora que lo pienso, quizá no es que no lo entienda, solo, que me mareo un poco, por ejemplo esto «ul.abanico:hover li:nth-of-type», eso me marea, ahí entiendo, que en la Lista desordenada cuya clase es .abanico, cuando el cursor esté activo sobre él, los elementos de la lista se activarán, intependientemente atendiendo al estilo personalizado por nth-of-type, ¿es así? x_x
Pues si lo veo lo puedo intentar interpretar, pero para crear ese tipo de cosas, directamente creo que no podría porque no entiendo cómo se estructura y no sé cómo buscar esta temática de CSS.
Lo siento, siempre escribo mucho, solo quería decir, QUE ESTO ES GENIAL!
Hola Klaus. La estructura de CSS es estándar y sirve para todos los sitios web, no sólo para Blogger. Blogger tiene sus particularidades pero no precisamente en esto del estilo.
EliminarSi quieres empezar (que no terminar), echa un vistazo a estos artículos:
- Css: Selectores básicos
- Css: Selectores avanzados
- Selectores de atricutos
Sobre la mitad del segundo y en el tercero, encontrarás material para entender eso que te marea, aunque como has visto, hay más como el :nth-of-type
Hola de nuevo, Oloman, tenía mucho tiempo sin entrar aquí, la verdad es que sigue creciendo bien, felicidades.
ResponderEliminarAhora una pregunta, podrías echarle un vistazo a http://losjuegosdelhambref1d.blogspot.com/, tengo un problema al bajar un poco el scroll, se me ponen los links con un margen y como a la mitad de la pantalla. Como puedo arreglarlo?
No sé lo que quieres decir exactamente Isaac, pero si te refieres a la barra de menú, esta tiene un efecto para que se quede siempre en una posición fija con respecto a la ventana del navegador. De todas formas, cualquier problema ahí deberías preguntarlo a su autor, que es quién mejor la conoce.
EliminarHola que tal todo perfecto oloman.
ResponderEliminaruna pregunta, como mando un url del menu gracias por todo
¿Qué cómo mandas una dirección URL del menú? No entiendo la pregunta. Lo siento.
EliminarAh pues queria saber como le dabamos una URL a las pestañas pero ya viendolo de cerca logre realizarlo.
EliminarUna vez mas gracias, excelete tu pagina !
Ah oloman casi lo olvido.
EliminarTengo una duda :) quiero colocar un slideshow automatico en mi blog, buscando en tu pagina no encontre o a lo mejor no busque bien.
Me podrias recomendar uno ?
tengo el Orbit pero no se hacerlo automatico.
Gracias.
Este es el más sencillo que conozco para las entradas recientes y en ese mismo artículo hay un enlace al sistema original para poner imágenes y enlaces manualmente, todavía más sencillo:
Eliminarhttp://www.oloblogger.com/2013/08/slider-entradas-recientes.html
Hola. La cosa seguro que se debe a que tu código carga dos veces ese "Más información" porque lo tienes duplicado en la plantilla. Yo he podido ver que tienes una con clase .jump-link y otra con .rmlink. Busca la primera y quítala para probar.
ResponderEliminar¡Hola!
ResponderEliminarHace un tiempo que leo tu blog y me has ayudado más de una vez, pero ahora tengo un problema MUY serio:
Resulta que al querer entrar en mi blog, me sale una advertencia de contenido malicioso, y te juro que no lo hay, o al menos a posta. ¿Puede ser que haya cogido una imagen de un sitio peligroso?
¿Qué hago?
Mil gracias.
Mi blog es este: http://nlohp.blogspot.com.es/
Vale, tranquilo, ya está solucionado.
EliminarTranquilo me quedo. Siento la demora.
Eliminargracias por Tus aportaciones y que pases unas fiestas de Navidad lo mejor.
ResponderEliminarUn saludo
Manuel
Igualmente Manuel :)
EliminarHola Oloman,
ResponderEliminarGracias como siempre por tus impresionantes trucos.
Aprovecho para preguntarte algo. Quiero editar la plantilla de mi blog un poco y quería saber si hay alguna forma de eliminar el espacio por defecto que hay entre la cabecera y la barra lateral del blog.
Gracias y felices fiestas!
Hola Emilio. Seguro que hay manera, pero tendría que saber la estructura que tiene y los selectores que definen cada una de esas zonas ¿Es en Campamento Web o en Fan Animal Crossing? No obstante en ambos veo una separación "normal".
EliminarEs en Fan Animal Crossing. Es que quiero hacer un cambio en el diseño y necesito hacer esa unión.
EliminarMuchas gracias.
Aquí lo tienes:
Eliminar.main-inner {
padding-top: 30px;
padding-bottom: 30px;
}
Ese padding-top es el que hace que se separen los bloques. Ponlo a cero.
Hola, buenos días.
ResponderEliminarHoy me he levantado y en mi correo estaba esta nueva entrada tuya.
Me he puesto ha ponerla en mi blog, pero cuando copio el código, tanto de una forma o de otra, no me sale nada en el blog.
¿Tengo que registrarme para que me de un código diferente?
Solo quiero saber como queda, por eso no hice ningún cambio, lo copio tal cual.
¿Qué estoy haciendo mal?
Abigail, no te sé decir porque tampoco sé exactamente qué haces. Fíjate en los ejemplos que puse en CodePen y a partir de ahí, la parte HTML iría en plantilla o en un gadget HTML/JavaScript, mientras que el CSS tendría que ir o bien en la parte de estilo de la plantilla o bien entre etiquetas STYLE dentro de un gadget también HTML/JavaScript.
EliminarOk, voy a probarlo y te diré.
ResponderEliminarGracias
De nada. Feliz año ;)
ResponderEliminarNo dejas de sorprenderme con los diseños.
ResponderEliminar:)
EliminarExcelente post, totalmente funcional. Le hice algunos cambios y ahora tengo mi diseño personalizado, pero no lo hubiese logrado sin esta orientación.
ResponderEliminar... Gracias por compartirlo!
Explicas muy bien Oloman, pero muy técnicamente todo. Dices que tu blog es para torpes. ¿De verdad? Empiezo a verme más que torpe porque, ¿dónde colocamos todo este código? ¿En plantilla html o en un gadget? ¿En ambos? ¿Todo seguido o qué? Es que no lo especificas. Eso, o que como digo lo explicas todo para gente con conocimientos medios de CSS, HTML, Javascript y demás. Nadie parece haberse molestado, soy la única que lo ha preguntado. deben de estar duchos en la materia y yo, una torpe como reza tu web.
ResponderEliminarAgradecería que las explicaciones fueran menos técnicas, más sencillas de entender y directas al código que hay que manipular.
Gracias.
Melocotona, a veces entro en más detalle y a veces no. El blog es para torpes y para no tanto. Los posts en los que bajo al mínimo nivel están marcados con la etiqueta BPT y este no es el caso.
EliminarAdemás me gusta explicar el por qué de cada cosa, ya que creo que así es como después podréis hacer sobre el ejemplo que suelo poner, todas las modificaciones que queráis o incluso "inventar" otras cosas basadas en el mismo sistema. Si me limitara a dar el código para copiar y pegar -cosa que te aseguro que me resultaría mucho más fácil de hacer que explicarlo todo- sería difícil que alguien aprendiera algo.
Entiendo que algunos queráis siempre entradas del tipo "copia y pega aquí", pero unas veces lo hago y otras no, así que permíteme que siga haciéndolo a mi manera. Es imposible contentar a todos siempre y lo otro, las explicaciones más detalladas, también me las demandan.
Dicho esto, en el enlace a CodePen que puse para cada uno de los dos menús tienes todo el código completo separado HTML y CSS. El HTML es lo que iría en un gadget y en Blogger, el CSS (casi) siempre va entre las etiquetas SKIN de la plantilla.
Esto último lo he dicho muchas veces en muchas entradas, pero no puedo estar repitiéndolo en todas. Si te das una vuelta por aquí y por aquí, verás que en adelante no necesitarás que lo diga de nuevo.
muy bueno el codigo lo use para diseñar un perfil adaptandolo un poco al numero de pestañas del menu y cambiando los hombres del elemento saludos
ResponderEliminarGracias, excelente, que tips me darias para colocar este menu en responsive, meterlo en una caja etc...soy novato en esto gracias
ResponderEliminarTe tengo que repetir lo mismo que en tus anteriores comentarios en los que preguntabas lo mismo.
EliminarEste tipo de menús funcionarán como enlaces normales y llevarán sin problema a destino en dispositivos táctiles, pero no se apreciará el efecto.