¿Cómo creo un menú con pestañas desplegables?

Esto ya es un poco más hardcore y requiere un pelín más de tiempo, pero de nuevo, no es imposible, así que tranquilidad y buenos alimentos. En Ciudad Blogger lo explican muy facilito, pero por si acaso, lo explicamos aquí otra vez usando sus códigos (que son los únicos que a mí me funcionan).

Nos vamos a la plantilla HTML y hacemos una copia de seguridad (just in case):

Y ahí buscamos /* Tabs con ctrl + F, como siempre. Una vez lo tenemos, vemos que debajo aparecen un montón de cosas hasta que pone /* Columns. Bien, pues todo eso, lo quitamos.

Es más que probable que nos aparezcan más líneas entre /* Tabs y /* Column, pero no preocuparse, se elimina todo lo que hace referencia a Tabs, sin importar cuántas líneas sean. Y una vez hecho eso, se pone el siguiente 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;}

De tal manera que quede así:

Una vez hecho esto, guardamos. Después, con ctrl + F buscamos class='tabs' y nos saldrá esto:

Pues lo borramos, solo lo recuadrado en amarillo, solo class='tabs', lo demás lo dejamos tal cual.

Ahora guardamos la plantilla y salimos de allí. Ahora vamos a crear el gadget en sí. Esto es muy sencillo, es un simple gadget HTML/Javascript en el que escribiremos 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>

La longitud de este gadget dependerá de las pestañas y subpestañas que queramos añadir. Aquí tenemos mil y media, pero si no necesitamos tantas, las quitaremos y punto. Donde pone URL, ese es el lugar donde tendremos que pegar el enlace que sea para que nos lleve a nuestras páginas.

También podemos usar la pestaña sin enlace si queremos que la pestaña solo sirva para que se desplieguen las demás, es decir, que aunque se clique en ella no salga nada (el ejemplo sería mi Pestaña 5, de la cual se despliegan las subpestañas Pestaña 5.1, Pestaña 5.2 y Pestaña 5.3, pero si clicamos en la propia Pestaña 5, no hay nada). Para eso, en lugar de poner una URL, solo ponemos # también entre comillas, importante. En el código de arriba, que es esencialmente igual al menú que yo tengo, ya hay puestas algunas de las # en lugar de URLs, pero si queremos que esas también conduzcan a alguna página, las cambiamos por la dirección que sea, y listo.

Una vez hecho esto, quedará como si fuera una lista de enlaces. Nos vamos a la edición del CSS y copiamos lo siguiente:

/* Menu molón
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú: si lo dejamos en 100% ocupará todo el ancho y listo. Si queremos modificarlo, con poner el valor en píxeles que más se adapte a nuestra plantilla, vale */
height:35px; /* Alto del menú. Si lo queremos más estrechito, reducimos */
padding-left:14px;
background:#000000; /* Color del menú */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px; /* Si cambiamos el alto del menú, tendremos que cambiarlo de nuevo cada vez que veamos height */
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; /* Color de las letras del menú */
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif; /* Fuente del menú, podemos poner la que mejor vaya con nuestro diseño, pero siempre entre comillas y después del nombre de la fuente, es importante poner una coma y dejar sans-serif; */
font-size:13px; /* Tamaño de la fuente */
font-weight:normal; /* Si queremos que esté en negrita, cambiamos normal por bold, si lo queremos en cursiva, lo cambiamos por italic */
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:#000000; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px; /* Ancho de las pestañas desplegables */
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 de las segundas pestañas desplegables (justo aquí abajo) */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxCBpyCo8OJbEDhfbI2GYNW2kByl0lvgXbAQcV3AysDHTPGbIsAdGTbv7U1274-zVj-zy3zG5uMjmucWZ75QOTqcxDP57Q083Z0knJAZ6YJ6PajMzWpHPf-xegsRnVxKopcCZtVPQ9syf/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el ratón */
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 ratón */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxCBpyCo8OJbEDhfbI2GYNW2kByl0lvgXbAQcV3AysDHTPGbIsAdGTbv7U1274-zVj-zy3zG5uMjmucWZ75QOTqcxDP57Q083Z0knJAZ6YJ6PajMzWpHPf-xegsRnVxKopcCZtVPQ9syf/) 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: #1AAC00; /* Color de fondo de las pestañas que se despliegan de las sub pestañas (sí, lo sé, Inception total, pero si miramos el menú de mi cabecera vemos que son las pestañas verdes, las 2.1.1.) */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}

Donde hay frases que parece que están escritas en cristiano y no en CSS (reconoceréis esas frases primero porque se entienden y segundo porque están entre /* ... */) son las cosillas que podemos cambiar sin miedo a cargarnos nada. En el propio código os explico qué son y para qué sirven, y al estar entre /* ... */ podéis conservarlo en el CSS sin afectar a nada (que a lo mejor es útil para cambiar alguna cosa días o meses o años después, cuando no nos acordemos de para qué era cada etiqueta). Obviamente, si no las queréis para nada las podéis quitar y punto (¡cuidado de no llevarnos nada más que eso!).

Así que solo queda eliminar el gadget de páginas prediseñado por Blogger si es que lo conservábamos y hala, ¡listo! ¿Alguna pregunta?