15/9/13

Tutorial: Menú con subpestañas

¡Hola!

Hoy os traigo un tutorial que resulta muy útil para un blog: Un menú con subpestañas (y encima este incluye un buscador)

Este tutorial es bastante... pesado. No es difícil, pero a mi me llevó de cabeza más de una vez, por lo que recomiendo leerlo todo, ir paso a paso, y sobretodo y veis que hoy no sale, intentadlo mañana.

Os dejo unos links de distintos tutoriales para la misma función que a mi me fueron muy útiles:



Y por último os dejo el tutorial que yo he seguido:




Dicho esto, empezamos:

PASO 1

Diseño~Edición de HTML. Pulsamos dentro del cuadro que aparece con todos los códigos y buscamos (con control+f) esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Hay que eliminar la parte que está en rojo, tantas veces aparezca.

PASO 2

Buscamos el siguiente código (recordar, con control+f)

/* Tabs
----------------------------------------------- */

Y eliminar todo lo que hay dentro, hasta que encontremos esto otro:

/* Headings
----------------------------------------------- */

Una vez eliminado, copiar este código:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Pulsamos en vista previa para comprobar que todo está como debería y guardamos la plantilla.

PASO 3

Plantilla~Edición Plantilla HTML y buscamos el siguiente código:

]]></b:skin>

Justo delante de ese código, pegar el siguiente:

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%;
 /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */

border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPBOdCsoktzCBt0FJrjhtXXMPu-LCJQXNLdGYBijpxmoWjiz59l-1ViAtCHdkgFAo0Ja-ZmGYgPo1eRzD6oCKg5qo-i6qKha5CWp-NanTeCW1aQMAIz0qrPmFyOOLfpOpgn7rfr9mZAVGB/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */

background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPBOdCsoktzCBt0FJrjhtXXMPu-LCJQXNLdGYBijpxmoWjiz59l-1ViAtCHdkgFAo0Ja-ZmGYgPo1eRzD6oCKg5qo-i6qKha5CWp-NanTeCW1aQMAIz0qrPmFyOOLfpOpgn7rfr9mZAVGB/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333;
 /* Color de fondo del submenú */

padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search { 

width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigpSsbZwxa_3uJzaeZP4SryZ-Ts-oA4FiWRGsUEw4r9wyk3mmh3Bb96AhD3OZxhp0gnMizk8AVnFY56DGflr_uyBqzaEbHlFypT09vKmKvcWdvKA9-zj-TfQLZNeLsHumCifnoSVNe0AQ/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Las áreas marcadas en verde nos ayuda a poder personalizar esa parte a nuestro gusto (color, tamaño...)
Una vez que lo tengamos todo como queremos, guardamos.

PASO 4

Diseño~añadimos un gadget HTML y en el pegamos lo siguiente:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='
URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace
'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace
'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace
'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace
'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace
'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1
</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>


<!-- Buscador -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</li>


</ul>
</div>

El nombre de las pestañas (Pestaña 1) será el nombre que aparezca en la pestaña principal, por ejemplo, HOME.
La Pestaña 2 será la segunda pestaña, y una vez que pasemos por encima de ella se abrirá el submenú (Pestaña 2.1) y el submenú del submenú (Pestaña 2.1.1)


  • Podemos cambiar el orden de las pestañas (si, por ejemplo, no queremos que la pestaña 2 tenga doble submenú, podemos copiar el código de la pestaña 5 (por ejemplo)
  • Si queréis añadir más pestañas (con subpestañas, o doble subpestañas) no tenéis que ir más que jugando con los códigos que ya tenéis (según con la característica que quieras). Eso si, SIEMPRE deben de pegarse ANTES del último </ul> </div> (en este caso, antes del buscador)
  • Si, por el contrario, queremos quitar pestañas, no tenemos más que seleccionar la pestaña que no queremos desde <li class=> hasta el </ul> </div> de dicha pestaña.
  • La parte de <!-- Buscador --> corresponde a la pestaña del buscador. Aquí podemos modificar el mensaje que aparece en el fondo. Viene predeterminado "Buscar..." pero si lo queréis cambiar, os lo he dejado en azul.

Pulsamos Vista Previa, y si todo está como queremos, Guardamos y colocamos el gadget debajo del nombre del blog (o donde más nos guste)


CONSEJOS
  • Leer todo bien antes de hacer el tutorial.
  • Ir dándole a vista previa cada dos por tres. Esto nos ayudará a saber en qué hemos fallado.
  • Paciencia, sobretodo con las pestañas y las subpestañas. Os aconsejo tener abiertas varias pestañas del navegador con el blog e ir añadiendo los enlaces y cambiar los nombres poco a poco, si no será un caos.
  • Como siempre, haced una copia de seguridad antes de tocar nada de la plantilla, por si acaso.

PERSONALIZACIÓN DEL MENÚ
Si de momento no habéis cambiado ningún color del menú, aquí van algunos consejos para personalizarlo.
Para ello, vamos a Edición HTML de plantilla (recordad la copia de seguridad...) 

Como he dicho antes, leyendo las partes en verde en la edición de plantilla podemos ver qué podemos cambiar, y cómo cambiarlo. Para elegir los colores os dejo ésta página que es muy sencilla de utilizar. No tenéis más que elegir un color, copiar el código que os da la página y sustituirlo por el que viene predeterminado en la plantilla.
También podemos elegir si queremos los bordes redondeados, y el radio que queremos (yo dejé el predeterminado, creo que queda chulo) Si no lo queremos redondeado, pues lo cambiamos a 0.
Y por último (y de esto no tenía ni idea, voy a hacerlo ahora mismo) si no queréis que aparezca una línea separando las pestañas entre sí, buscamos ésta línea y la borramos.

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNec9MQHgdiXSoLibpq_C4BR_2brEPRkKwU36KOd3lWcAIH1hGbGUEeBd9VEiOWgIPEIo3-MibLDGqOwhbPdRG-3KNrmBFM_aeg5A5PbFX71qcRVxI7Jkl1-XELZGSE3r1xpONvSZ68Ak/s35/separador.gif)

Aviso: el enlace cambia con cada blog, por lo que en edición de HTML, en el cuadro de buscar, copiar la primera parte de código (hasta http://) y darle a intro.


Y eso es todo! Parece mucho más difícil de lo que en realidad es (todo es cuestión de ir poco a poco, y de tener paciencia!) Espero que lo disfrutéis. Ya sabéis que si tenéis cualquier duda, podéis dejármela en los comentarios e intentaré resolverla!!

18 comentarios:

  1. Pues ahora después lo leo y lo intento! Llevo mucho tiempo queriendo saber como se ponen así el menú.
    Gracias por la info^^

    ResponderEliminar
    Respuestas
    1. De nada! Me parece que el tutorial merece la pena, así que te animo a hacerlo!! :D

      Un beso!

      Eliminar
  2. Hola!!! gracias por el tutorial!! probaré a ver cómo sale, que hace tiempo que buscaba poner el menú así.

    Besos!!!

    ResponderEliminar
    Respuestas
    1. De nada!
      No dudes en preguntar si tienes cualquier duda ^^

      Un beso!

      Eliminar
  3. Muchas gracias por la info, pero lo estoy intentando poner en mi blog y no hay manera de que me quede horizontal, me sale en fila para abajo, sabes que estoy haciendo mal?

    Gracias y ♡ Besos ♡

    ResponderEliminar
    Respuestas
    1. Ya lo solucione tenia otro codigo de hace tiempo al poner este parece ser que no son compatibles. Muchas gracias.

      Eliminar
    2. Siento no haber respondido antes, pero me alegro de que lo hayas solucionado ^^

      Un beso!

      Eliminar
  4. ¡Lo he conseguido! ¡Muchas gracias! ^^

    ResponderEliminar
  5. Hola! La verdad es que si requiere mucha paciencia, pero aun lo sigo intentando y no he podido ponerlo horizontal sino que me sale de fila hacia abajo, sabes que me podria estar saliendo mal? Muchas Gracias!

    ResponderEliminar
    Respuestas
    1. siento responder tan tarde! La verdad es que los comentarios en las entradas tan "antiguas" no me salen notificados.

      Es muy importante hacer copias de seguridad de la plantilla y plantearte hacerlo con mucha calma. A mi me llevó varios intentos, así que no sabría decirte exactamente qué debes hacer porque no soy una experta en HTML. Te invito a pasar por los enlaces de donde yo saqué el tutorial (están puestos arriba) y entre todos lo intentes.

      Mucha suerte!!

      Eliminar
  6. Muchas gracias por el tutorial. Me ha salido bien el Menu desplegable. El problema es que solo se abren las subpestañas por orden de pestañas. No sé si me explico; Tengo que abrir primero alguna Entrada de la Pestaña 2 para que después se me abra una entrada, por ejemplo en la pestaña 5.
    Si entro en el blog y quiero abrir una entrada que está en una subpestaña en la pestaña 5 no se abre (primero tengo que abrir siempre una entrada de la pestaña 2).
    Sabes decirme que es lo que he hecho mal? O esto es lo normal?
    Muchas gracias por la atención.

    ResponderEliminar
    Respuestas
    1. Siento la tardanza en contestar, normalmente estas dudas las contesto antes si me mandáis un correo electrónico :)

      Me parece muy raro lo que te pasa, yo tuve este menú instalado y se abría automáticamente la pestaña o la subpestaña que quisiera, siempre navegando entre ellas (es decir pasando el cursor, no teniendo que abrir entradas) Puede que hayas cometido un error a la hora de poner los enlaces en el HTML en diseño. Prueba a volver a hacerlo si sigue el error.

      Acabo de visitar tu blog y no he tenido ningún problema, si ya lo has solucionado siento, de nuevo, contestar tan tarde (y no poder ser de mucha ayuda).

      Un saludo!

      Eliminar
  7. Hola guapa!! Antes que nada, ¡mil gracias por el tutorial! Muy sencillo de hacer para alguien como yo que no se entera de mucho... jeje.

    Solo tengo una pregunta. En las pestañas del submenú, ¿hay alguna manera de que el fondo sea del tamaño de la frase? (que se agrande?). Es que me sale la mitad de color y la otra mitad transparente y no sé por qué... Te dejo el link de mi blog para que veas a lo que me refiero: http://arsenicodivagando.blogspot.com.es/

    Un beso y gracias!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Me alegra mucho de que te haya sido de utilidad. Por desgracia no puedo ayudarte mucho, ya que como dije este tutorial lo hice fijándome en otras páginas web (las cité también arriba) y a mi me funcionó en su día. Lo único que se me ocurre es que cambies la cifra donde pone "width:200px;" de los submenús. Ves probando cifras hasta que se quede bien.

      Te sigo en el blog para ir viendo si lo consigues arreglar (y porque es muy chulo!) Espero que te sea de ayuda, un saludo!!

      Eliminar
    2. ¡Muchas gracias por responder, guapa! Lo he intentando modificando width y nada de nada... no sé qué le pasa, pero bueno, de momento así se queda mientras busco solución u algún otro que me pueda servir... Que después de 3 días con el html necesito descansar, jaja

      ¡Gracias de nuevo!

      Besotes!!

      Eliminar

Escribir una entrada lleva su tiempo, y agradezco mucho cualquier comentario que hagáis sobre ella, siempre que sea respetuoso.
Prometo contestar todos los comentarios (lo más pronto posible!)

Saludos!

Related Posts Plugin for WordPress, Blogger...