Menú responsive desplegable para Blogger con HTML y CSS

Un menú responsive también conocido como menú adaptable a cualquier tamaño de pantalla es de gran utilidad para tener orden en un blog con respecto a las etiquetas o categorías y de esa forma darle al lector la posibilidad de ubicarse mejor, al permitirle a este encontrar más fácilmente cualquier contenido.

En el caso de Blogger esta plataforma solo posee etiquetas por lo que si se quiere tener un orden hay que llevarlo con estas, no es como WordPress donde se tiene categorías, sin embargo ambas cosas son casi lo mismo llevándolo a un punto de vista de orden para un blog, claro está en WordPress se ordena un menú por categorías pero en Blogger solo tendrás disponible dicho orden por etiquetas.

En el menú responsive que te mostrare aquí también podrás añadir la URL de una entrada o una página estática, sin embargo te recomiendo que en vez de hacer eso, solo utilices URL de las etiquetas de Blogger de esa forma tendrás un mayor orden, ahora bien si quieres destacar una entrada en particular en el menú entonces utiliza la URL de dicho post.

¿Cómo añadir este menú responsive en Blogger?

Añadir este menú en Blogger es súper sencillo, solo debes seguir ciertos pasos y tendrás funcionando tu menú, recuerda que este va a ser igual al que tengo yo en este blog así que te va a quedar muy bien y aparte de eso podrás cambiar los colores en cualquier momento. Por default te daré el menú con la configuración de colores que tengo yo, pero te diré que cambiar en caso de que quieras hacerlo.

Primero añade los estilos del menú

1. Para añadir los estilos debes ir a Tema.
2. Editar HTML, presionas CTRL junto con la tecla F y buscas la línea de condigo “]]></b:skin>”.
3. Antes de esa línea de código debes pegar:

body{margin:0;padding-right:0;padding-left:0}#menu{background:#f67952;color:#333;height:40px;border-bottom:1px solid #e9e9e9;box-shadow:1px 2px 9px #ffae00;width:100%;position:fixed;z-index:101}#menu ul,#menu li{margin:0 auto;padding:0;list-style:none}#menu ul{height:45px;width:1030px}#menu li{float:left;display:inline;position:relative;font:11px Arial,sans-serif}#menu a{display:block;line-height:40px;padding:0 14px;color:#333;text-transform:uppercase;letter-spacing:1.5px}#menu li a:hover{color:#000;text-decoration:none;transition:all .1s ease-in-out;background:#ffae00}#menu input{display:none;margin:0;padding:0;width:80px;height:30px;opacity:0;cursor:pointer}#menu label{font:25px Arial,sans-serif;font-weight:bold;display:none;width:35px;height:35px;line-height:43px;text-align:center}#menu label span{font:12px Arial,sans-serif;position:fixed;left:35px;text-transform:uppercase;font-weight:bold;line-height:40px;letter-spacing:.5px}#menu ul.menus{height:auto;overflow:hidden;width:170px;background:#ffa285;position:absolute;z-index:99;display:none;border:#e9e9e9 solid 1px}#menu ul.menus li{display:block;width:100%;font:11px Arial,sans-serif;text-transform:uppercase;border-bottom:1px solid #e9e9e9}#menu ul.menus li:last-child{border-bottom:0}#menu ul.menus a{color:#333;line-height:35px}#menu li:hover ul.menus{display:block}#menu ul.menus a:hover{background:#ffae00;color:#000;transition:all .1s ease-in-out}
@media screen and (max-width:800px){#menu{position:fixed;z-index:101}#menu ul{background:#ff8863;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}#menu ul.menus{width:100%;position:static;padding-left:20px}#menu li{display:block;float:none;width:auto;font:11px Arial,sans-serif}#menu a{display:block;line-height:40px;padding:0 14px}#menu input,#menu label{position:absolute;top:0;left:0;display:block}#menu input{z-index:4}#menu input:checked+label{color:#333}#menu input:checked ~ ul{display:block}}header{padding-top:30px}

• background:#f67952 Esta propiedad es la primera que señale en el CSS del menú responsive, aquí se ubica el color principal de la barra del menú tanto cuando se vea en pantalla completa como cuando sea responsive.
• border-bottom:1px solid #e9e9e9 Esta otra propiedad define la separación entre los sub-niveles de 1px y el color de la linea que separa es #e9e9e9
• box-shadow:1px 2px 9px #ffae00 Esta propiedad define el color y tamaño de la pequeña línea decorativa del menú responsive que esta debajo de él.
• color:#000 Este es el color de la flechita de los sub-niveles, a su vez representa que dicho menú contiene sub-categorías.
• background:#ffae00 El segundo color de fondo es un pequeño estilo que se añade al pasar el cursor por encima de la etiqueta de primer nivel que se quiere seleccionar, este color lo use anteriormente ya que en mi menú lo coloque también en la barra decorativa.
• background:#ffa285 Este es el color de los sub-niveles sin que se pase el cursor por encima.
• background:#ffae00 Esta es la tercera vez que uso este color y es para cuando se pasa el cursor por encima de la etiqueta de segundo nivel que se quiere seleccionar.
• @media screen and (max-width:800px) Esta es la propiedad que define el tamaño desde el cual el menú se empieza a hacer responsive, en mi caso es de 800px, pero tú lo puedes cambiar si quieres.
• background:#ff8863 Este es el color para las etiquetas de primer nivel del menú.
• header{padding-top:30px} Esta propiedad es casi obligatoria añadirla en caso de que el menú no permita visualizar bien el título del blog cuando se observa desde un dispositivo móvil, según como se vea puedes aumentar y disminuir el valor en píxeles.

Recuerda cambiar los colores del menú o si quieres déjalos pero quedara igual que el mio, en caso de que requieras verificar los códigos de colores puedes hacer uso de PhotoShop CS6 ya que esa es la herramienta que uso para seleccionar colores, obtener sus códigos y buscar otras tonalidades que puedan ser buenas para el menú. Recuerda darle clic al botón Guardar plantilla.

Ahora añade código HTML del menú

Este paso es el más sencillo ya que aquí solo tienes que añadir la estructura básica del menú responsive, este menú solo puede mostrar etiquetas categorizadas de primer nivel y de segundo nivel (nivel desplegable), no se pueden mostrar un tercer nivel o superior ya que no posee dicha configuración:

1. Ve a Tema.
2. Editar HTML, presionas CTRL junto con la tecla F y buscas la línea de condigo “<body>” si no te aparece de esta forma busca “<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>”.
3. Debajo de esa línea de código debes pegar la estructura básica del menú:

<nav id=’menu’>
<input type=’checkbox’/>
<label>&#8801;<span>Menu</span></label>
<ul>
<li><a href=’Coloca aquí la URL de la página principal de tu blog’>Página Principal (Nivel 1)</a></li>
<li><a href=’URL de la etiqueta 1′>Titulo de etiqueta (Nivel 1)</a></li>
<li><a href=’URL de la etiqueta 2′>Titulo de etiqueta 2 (Nivel 1)</a></li>
<li><a href=’URL de la etiqueta 3′>Titulo de etiqueta 3 (Nivel 1)</a></li>
<li>
<a href=’#’>Titulo del menu desplegable de nivel 2 (deja el # donde está)<font size=’1′>&#9660;</font></a>
<ul class=’menus’>
<li><a href=’URL de la etiqueta 4′>Titulo de etiqueta 3 (Nivel 2)</a></li>
<li><a href=’URL de la etiqueta 5′>Titulo de etiqueta 3 (Nivel 2)</a></li>
</ul>
</li>
</ul>
</nav>

Si quieres puedes añadir otro sub-menú (menú de nivel 2) con el simple hecho de añadir dentro del código principal este otro que coreresponde al nivel desplegable:

<li>
<a href=’#’>Titulo del menú desplegable de nivel 2 (deja el # donde está)<font size=’1′>&#9660;</font></a>
<ul class=’menus’>
<li><a href=’URL de la etiqueta 4′>Titulo de etiqueta 3 (Nivel 2)</a></li>
<li><a href=’URL de la etiqueta 5′>Titulo de etiqueta 3 (Nivel 2)</a></li>
</ul>
</li>

Recuerda añadir esto antes de la etiqueta </ul> final, para que no te pierdas lo deje marcado en rojo en el menú ya que este último código es el mismo usado arriba para añadir un sub-nivel. Por ultimo haces clic en Guardar plantilla.

Añade iconos de redes sociales a este menú

En este menú responsive se pueden añadir iconos de redes sociales, esto se hace con el fin de aprovechar la visibilidad del menú ya que es sticky porque así se pueden conseguir que más personas nos sigan en nuestros perfiles sociales, sin embargo eso es algo que no explicare aquí ya que en este menú no coloque eso.

Si tú quieres puedes añadir iconos de redes sociales pero para eso te invito a que visites el blog de Minerva Aurora ya que ella si explica cómo se puede hacer, en lo persona no me gusta añadir estos iconos ya que la carga es mediante un script y esto le quitaría mucha velocidad a mi web, pero si a ti eso no te importa e igualmente los quieres añadir entonces visita el blog de Minerva.