AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Menús -4- Configurar tu propio menú con submenús

jueves, 11 de febrero de 2010

Imagino que habeis tenido suficiente tiempo para aprender a hacer un menú simple, así que ahora voy a explicar como añadirle un submenú, de manera que a este menú simple:

<ul class="menu">

<li>
<a href="direccion">Palabra</a>
</li>

(Aquí pondremos el submenú.)

<li>
<a href="dirección>Palabra</a>
</li>

</ul>

vamos a añadirle un submenú entre estos dos enlaces.

Como siempre es mejor un ejemplo práctico que teórico, os voy a mostrar como he construido el del blog de muestra.
Podeis ver, si habeis pinchado para ello, que en ese menú he usado Utilidades como enlace principal y al poner el ratón encima se despliega el submenú, en el que se ven los blogs que están incluidos en Utilidades.

Así que, ¡vamos allá!

Primero pondremos el enlace que se va a ver, pero como queremos que este enlace se distinga de los demás le adjudicaremos una clase:

<li class="drop">
a continuación el enlace principal:

<a href="la dirección de Utilidades">Utilidades</a>
ahora añadiremos la orden para que se vea el icono que demuestra que ese enlace es expandible y se expanda cuando pongamos el ratón encima:

<span class="toogle"> </span>

y a continuación el submenú que se ha de ver al desplegarse:

<ul>

<li>
<a href="dirección del blog iGoogle">iGoogle</a>
</li>

<li>
<a href="dirección del blog Picasa">Picasa</a>
</li>

<li>
<a href="dirección del blog Feed Burner">Feed Burner</a>
</li>

Podría haber seguido añadiendo tantos blogs como quisiera, pero con esos 3, para la demostración ya era suficiente, así que cerré el submenú.

</ul>
</li>

Y aquí continué con un enlace simple.

Si en lugar de una lista de blogs, lo que quieres es hacer una lista de entradas o de etiquetas, el sistema es el mismo.
Tan solo has de poner las direcciones de lo que vayas a querer ver enlazado ahí.

Recuerda que a cada enlace le puedes añadir lo de target="_blank" para que se abra en otra ventana, así como lo de title="palabra o frase" para que se muestre una explicación breve al poner el ratón encima.

Pero aún no hemos terminado.
Nos falta añadir el CSS que hará que ese submenú funcione, se vea el icono y se despliegue.

De manera que iremos a Diseño/Edición de HTML y buscaremos el código que añadimos para que los enlaces simples se vieran de una forma especial y le añadiremos esto:

Para que se sepa que se ha de desplegar y muestre el icono:

ul.menu li a span {
font-weight: normal;
padding-left: 3px;
}
ul.menu li.drop a {
padding-right: 7px;
}
ul.menu li.drop:hover
li {
border: none;
}
ul.menu li.drop span.toggle {
background:
transparent url(http://dl.dropbox.com/u/2616707/png/views-24.png)
no-repeat;
display: block;
float: left;
height: 26px;
margin: 0
5px;
padding: 0;
width: 20px;
}

Los efectos al pasar el ratón que despliega el submenú:

ul.menu li.drop:hover {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
ul.menu li.drop:hover ul {
display: block;
padding: 0 0 10px 0;
z-index: 1;
}

(El primer grupo de órdenes hará que en Firefox los enlaces se vean con los bordes redondeados.
Lamentablemente, no se verán en Explorer, pero déjalos por si quien entra a tu blog usa Firefox, aunque tu no lo hagas).

Sigamos.

La lista del submenú:

ul.menu li ul {
background-color: #555;
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position:
absolute;
top: 30px;
width: 100%;
}

Cada item del submenú

ul.menu li ul li {
border: none;
float: none;
height: auto;
margin: 0;
padding: 0;
}
Cada item del submenú es un enlace.

ul.menu li ul li a {
background-color: transparent;
color: #DDD
!important;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
margin: 0;
padding: 5px 15px;
}

Efectos sobre los items del submenú

ul.menu li:hover ul {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border: none;
background-color:
#555;
}
ul.menu li:hover ul * {
-moz-border-radius: 0;
background-color: transparent;
}
ul.menu li ul li:hover {
background-color: #000;
}

Os he dejado la dirección de la lupa que hay en ese submenú. Podeis cambiarla por la de vuestro propio icono, pero teneis que pensar que ha de ser pequeñito, (este mide 24 x 24), o las medidas no encajarán.

Una vez copiados todos estos pedacitos en el CSS, ya podreis ver vuestro menú con submenús.

Recordad que podeis modificar los colores, (estos son los que hay en el blog de muestra), simplemente cambiando el código hexagesimal que hay aquí, o inventando/creando variables o usando las que haya en el blog.

Y si no lo tienes claro, usa un blog de pruebas para ir haciendo experimentos, y puedas ver qué cambia cada orden.

P.S. Nuevamente agradezco a Vagabundia que hiciera una entrada explicando como hacer ésto.
Los códigos están copiados de su blog.
Yo me he limitado a descifrarlos y explicarlos.

Imprime esta entrada

11 comentarios. ¿Quieres añadir el tuyo?

  1. Sacerdotisa ha dicho
  2. Estoy agradecida de encontrarte, he puesto varias cosas de tus consejos ^.^

  3. José GDF ha dicho
  4. Quería aportar un par de cosas, si quieres.

    La propiedad -moz-border-radius, al igual que otras propiedades de CSS, se puede escribir de forma abreviada. El equivalente a tu ejemplo en abreviada sería:

    -moz-border-radius:4px 4px 0 0;

    O mejor todavía:

    -moz-border-radius:4px 0;

    fuente

    Por otro lado, Google Chrome, al igual que Safari y otros navegadores basados en el motor de Webkit, también soportan esquinas redondeadas. Su sintaxis, que se puede agregar a continuación de la de Firefox. Sería así:

    -webkit-border-radius:4px 0;

    Lamentablemente ni Internet Explorer ni Opera leen las esquinas redondeadas. Hay soluciones en JavaScript para ello, pero ya he desistido en el intento.

    Desde que estoy haciendo la nueva plantilla estoy aprendiendo un montón de cosas, pero todo gracias a bloggers como tú, que le echáis vuestras horas con los tutoriales. Sé lo que es porque también escribo tutoriales, aunque de otros temas.

    Cuando inaugure el nuevo diseño, te avisaré si quieres. Es lo menos que puedo hacer.

  5. José GDF ha dicho
  6. Rectificación:

    En este ejemplo no son igual
    -moz-border-radius:4px 0; ni
    -webkit-border-radius:4px 0;
    a
    -moz-border-radius:4px 4px 0 0; y
    -webkit-border-radius:4px 4px 0 0;
    respectivamente...

    Es que he estado repasando la lección, y me he dado cuenta de mi fallo, ¡je, je, je!

    Un saludo.

  7. Eulalia ha dicho
  8. Jose:
    Mientras Explorer no muestre las cosas igual que Firefox, o que todos se pongan de acuerdo para mostrar lo mismo con una sola orden, la nena pasa de curvitas y va a lo seguro.

    En este código he incluido eso porqué JMuir lo incluye y no quiero desmerecer su trabajo, pero por mi lo quitaría.

    Saludos.

  9. José GDF ha dicho
  10. Eulalia, si me quito eso de mi nueva plantilla, el diseño se va al carajo. Me da igual que dos navegadores que no quieren mirar hacia adelante no lo lean, al menos a día de hoy.

    Al final tendrán que hacerlo, porque páginas importantes como Twitter, por poner un ejemplo, ya están usando las curvas de navegador por defecto.

    A una mala puedo recurrir al viejo truco de crear las esquinas con imágenes transparentes de fondo y posicionarlas con CSS, y usar el condicional para IE... Pero Opera seguiría sin poder redondear, pero ese navegador lo usa poca gente.

    En pocas palabras, que hay que mirar un poco hacia delante :) Por cierto, me gustaría que le echaras una criticada a mi nueva plantilla cuando la tenga acabada. Sería para mi todo un honor. Ya avisaré.

    Un saludo.

  11. Eulalia ha dicho
  12. Jose: Si yo no digo que no lo pongas o que no lo ponga quien quiera, solo te he dado mi opinión personal. Verás, si tienes tiempo de repasar Toooodos mis blogs, (ejem), que excepto en los que tienen la rounders como plantilla, no hay ni una p..a curva en ninguno de ellos.
    Y en la rounders porqué vienen de serie las imágenes.
    Y si, estaré encantada de ver tu nuevo blog en cuanto consideres oportuno que lo haga.
    Besitos.

  13. carmen ha dicho
  14. Hola Eulalia:He entrado muchas veces a tu blog y en este momento me dicido a escribirte, tengo que felicitarte por lo que haces ypor lo que has has conseguido,pues tienes muchos seguidores,ya me gustaria a mi.Pero cada uno tiene lo que se trabaja...y tu te lo has currado y muy bien.LLebo solo dos meses en esto y estoy confeccionando mi blog yo sola, ,aprendiendo de mis herrores.Me gustaria si puedes...que entrases a mi blog,y me dijeras que es lo que hago mal y que me falta por hacer bien.Sin màs Eulalia espero tu contestaciòn y quedo agradecida por la atenciòn prestada.Gracia WAPA.BESOS.
    Carmen Silza.

  15. EL AGUACATE AZUL ha dicho
  16. Hola Eulalia!

    Sólo quería felicitarte por tu blog y agradecerte la ayuda que nos das a los que estamos empezando en esto.
    Intentaré poner un menú con submenú en mi blog. Puedes visitarlo y ver cómo ha quedado.
    Gracias.
    http://elaguacateazul.blogspot.com/

  17. oscar ha dicho
  18. Hola.
    He copiado todo el código de css a una hoja y despues lo he pegado en la plantilla.
    Mi duda es ¿donde se pega el código realmente?
    Antes de </head
    Yo lo pego ahí pero no me va bien.

  19. Eulalia ha dicho
  20. Oscar:
    El CSS se pega encima de b:skin justo al final de todos los demás códigos que empiezan no la almohadilla #

  21. Ezequiel M. ha dicho
  22. Eulalia, tengo una menubar que hice con tu guía de este post (http://laeulalia-blogdeprobes.blogspot.com/2008/02/un-men-bajo-la-cabecera-o-sobre-ella.html)
    Quería hacerle entonces los botones desplegable, pero no entiendo cómo incertar los cambios en el código que tengo. Te agradecería una orientación, o si arranco todo de cero para hacerla de nuevo.
    Gracias!!!

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.