Menú Horizontal (Formato plano, botones con sombra, redondeados + buscador integrado)
En Blogger y otras plataformas, en ocasiones deseamos facilitar enlaces mediante algún menú, pero encontramos ciertas limitaciones. En Wordpress, el asunto es diferente y además existen varios plugins que mejoran lo definido por defecto.
Si deseas un menú y si tu sitio no va de la mano con wordpress, entonces el contenido de esta entrada te conviene.
Y es que,... si necesitas ofrecer a los visitantes de tu web, enlaces categorizando la opción a elegir, te puede servir mucho un menú horizontal que contenga submenús relacionados con la opción principal. Además es mucho mejor, si se ha adicionado una muy útil caja de búsqueda, con un formato tal como se muestra en la imagen.
Los botones del menú, son de tamaño variable de acuerdo al texto que contienen.
La disposición de este menú en tu sitio, se ha pre-definido y se basa en dos acciones:
- Código CSS para definir el estilo.
- Código HTML que necesitas donde deseas que aparezca el menú.
Lógicamente, a esto se suma la acción tuya, editando el código CSS y el HTML según sea tu requerimiento.
MANOS A LA OBRA
1. Código CSS para definir el estilo del menú horizontal
1.1 Copia el código CSS
Copia unos de los estilos que encontrarás en esta entrada: Estilos pre-definidos - Menú Horizontal para Blogger y otros. (Después regresa para continuar con los pasos.)
Recuerda que puedes editar el CSS, de acuerdo a los colores y fuentes de tu sitio.
1.2 Inserta el código CSS
Si deseas insertar el CSS en una plataforma No Blogger, deberás insertarlo antes de la etiqueta </head> y entre las etiquetas <style > y </style>, por ejemplo:
<style type="text/css">
...Aquí pegas código CSS...
</style>
</head>
En Blogger, también puedes hacerlo, pero para que no toques las plantilla, el código CSS puedes insertarlo tal como te lo muestro, utilizando las opciones:
- Tema (o Diseño)
- Personalizar (o Diseñador de temas)
- Opciones avanzadas
- Agregar CSS (aparece como última opción en el menú desplegable que comienza con texto de la página)
Menú horizontal para Blogger y otros
2. Código html que necesitas donde deseas que aparezca el menú.
Luego de lo anterior, según el lugar donde requieras el menú, solo quedaría que lo estructures con las opciones que necesites. Para esto, entrando en modo de edición HTML, identifica el lugar donde colocarás el menú.
Inserta este código donde desees que aparezca el menú:
<div id="CssMenu1" style="position:relative;width:100%;height:38px;z-index:999;">
<ul>
<li class="firstmain"><a href="#" target="_self">Item 1</a>
</li>
<li><a class="withsubmenu" href="#" target="_self">Item 2</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item2-1</a>
</li>
<li class="lastitem"><a href="#" target="_self">Item2-2</a>
</li>
</ul>
</li>
<li><a class="withsubmenu" href="#" target="_self">Item 3</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item3-1</a>
</li>
<li><a href="#" target="_self">Item3-2</a>
</li>
<li class="lastitem"><a href="#" target="_self">Item3-3</a>
</li>
</ul>
</li>
<li><a class="withsubmenu" href="#" target="_self">Item 4</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item4-1</a>
</li>
<li><a href="#" target="_self">Item4-2</a>
</li>
<li><a href="#" target="_self">Item4-3</a>
</li>
<li class="lastitem"><a class="withsubmenu" href="#" target="_self">Item4-4</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item4-4-1</a>
</li>
<li><a href="#" target="_self">Item4-4-2</a>
</li>
<li><a href="#" target="_self">Item4-4-3</a>
</li>
<li class="lastitem"><a href="#" target="_self">Item4-4-4</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Buscador -->
<div style='float:right'>
<form align="right" action='/search' id='search' method='get' name='searchForm' style='display:inline'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='26' type='text' value='Buscar...'/></form></div>
</div>
Como te darás cuenta, este código se ha segmentado con el fin de ofrecerte una mejor visualización de la estructura.
En este punto, ya podrías ir visualizando como se presenta el menú horizontal según el estilo que escogiste. No te asombres si no lo ves bien en la cabecera de Blogger, más abajo hay un detalle.
Menú Horizontal para Blogger y otros
Editando la opciones del menú y el submenú
Ahora, solo bastará que añadas o elimines los vínculos, los items y si deseas puedes modificar o eliminar el target.
Tomaremos como ejemplo el segmento del Item4-4 (el de la flechita).
<li class="lastitem"><a class="withsubmenu" href="#" target="_self">Item4-4</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item4-4-1</a>
</li>
<li><a href="#" target="_self">Item4-4-2</a>
</li>
<li><a href="#" target="_self">Item4-4-3</a>
</li>
<li class="lastitem"><a href="#" target="_self">Item4-4-4</a>
</li>
</ul>
</li>
- Fíjate que en esta línea se añade class=”withsubmenu”
<li class="lastitem"><a class="withsubmenu" href="#" target="_self">Item4-4</a>
Esto permite que definas una opción que contiene un submenú y además le añade la flechita.
- El contenido entre las etiquetas <ul> … </ul> permite definir un grupo de opciones en el submenú.
- El contenido entre las etiquetas <li> … </li> permite definir cada una de las opciones. Solo la primera y la ultima tienen sus respectivas clases class="firstitem” y class="lastitem"
Reemplaza entonces:
<li><a href="#" target="_self" >Item4-4</a>
# por la url de vinculo que deseas.
target=”_self” por target="_blank" si deseas que se abra el enlace en una pestaña nueva.
Item4-4 por el Item que en realidad desees que se presente.
De igual manera, basta con que añadas o elimines las líneas desde <li>… </li> en caso de necesitar más o menos opciones.
⚠ BLOGGER (Inserción de menú horizontal en espacio cabecera).
Siendo honesto, es muy probable que elijas colocarlo en un gadget de la cabecera en Blogger, pero no logres obtener los resultados deseados (no se despliegan los submenús) debido a la estructuración.
No obstante, en otros gadget de Blogger que no sean de cabecera o bien en otro tipo de plataforma (No Blogger), si podrás ver dichos resultados.
Pero, si se te hace necesario insertar este menú en el sector de cabecera BLOGGER, eso es muy fácil y puedes seguir los sencillos pasos que te detallo aquí: Como insertar cualquier menú en espacio de cabecera Blogger (truco)
¿Ves un listado con viñetas, porque colocaste el código en una entrada?
Si decides colocarlo por ejemplo dentro de una entrada editando en modo Vista HTML y luego pasas a modo “Vista de Redacción”, verás que solo aparece como un listado con viñetas. Sin embargo, eso no quiere decir que al presentarlo (vista previa o publicarlo) no puedas verlo como realmente aparecerá.
Espero que este contenido sobre menú horizontal te haya gustado y resuelva algún requerimiento que pudieras haber tenido.
No olvides apoyar compartiendo. Cualquier duda, pregunta en los comentarios.
No hay comentarios.:
👉 Publicar un comentario