Menú horizontal con efecto deslizante

Menú horizontal con efecto deslizante

El menú horizontal con Submenus con un efecto deslizante,en concreto es un menú de subpestañas hecho con jQuery el cual despliega sus subpestañas con un deslizado suave, y aunque se publicó hace ya bastante tiempo, es uno de los menús de aquí que he visto que usan mucho, pues es un menú que se adapta a muchos estilos de plantilla.

Sin embargo, algunos batallan cuando quieren personalizarlo, y es que al estar alojados en un hosting tanto el script como los estilos CSS, hace que se complique para algunos poder hacerle cambios para darle ese toque personalizado.

Así que en esta entrada veremos el mismo menú, pero, esta vez no alojaremos ni el script ni los estilos en ningún servidor, todo estará dentro de la plantilla para que sea mucho más fácil hacerle cambios, además usaremos una versión más reciente de jQuery, y como pilón, ya tiene los cambios para que puedan usarlo junto con Scriptaculous y Prototype sin ningún problema.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada. Ciudad Blogger:

Para comenzar vamos a entrar a la Edición de HTML y agregamos antes de </head> los scripts:

Luego, antes de ]]></b:skin> pega los estilos:

/* Menú horizontal deslizante
----------------------------------------------- */
.jqueryslidemenu{
background: #414141; /* Color de fondo del menú */
width: 100%;
font-weight: bold;
font-size: 12px; /* Tamaño de la letra */
font-family: Verdana; /* Tipo de letra */
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li {
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a {
display: block;
background: #414141; /* Color de las pestañas */
padding: 8px 10px;
border-right: 1px solid #778; /* Color del borde que separa las pestañas */
text-decoration: none;
}

* html .jqueryslidemenu ul li a {
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
color: #FFF; /* Color del texto */
}

.jqueryslidemenu ul li a:hover {
background: #000; /* Color de la pestaña al pasar el cursor */
color: #FFF; /* Color del texto al pasar el cursor */
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li {
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul {
top: 0;
}

.jqueryslidemenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /* Ancho de las subpestañas */
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

<div class="jqueryslidemenu" id="myslidemenu">
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="URL del enlace">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Sub 3.1</a></li>
<li><a href="URL del enlace">Sub 3.2</a>
<ul>
<li><a href="URL del enlace">Sub 3.2.1</a></li>
<li><a href="URL del enlace">Sub 3.2.2</a></li>
<li><a href="URL del enlace">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="#">Pestaña 5</a>
<ul>
<li><a href="URL del enlace">Sub 5.1</a></li>
<li><a href="URL del enlace">Sub 5.2</a></li>
<li><a href="URL del enlace">Sub 5.3</a></li>
<li><a href="URL del enlace">Sub 5.4</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 6</a></li>

</ul>

<br style='clear: left'/>
</div>

Añade las URLs de los enlaces y los nombres de las pestañas donde se indica y listo.
En color verde se señalan las áreas que pueden personalizarse, como el color de fondo, el color de los enlaces, etc.
Las flechas de las subpestañas son imágenes y pueden cambiarse en el primer código, reemplazando las URLs en color naranja.

Si quisieras añadir otra pestaña sólo agrega antes del último </ul> una línea como esta:

<li><a href="URL del enlace">Otra Pestaña</a></li>

Si quisieras agregar otra pestaña que contenga subpestañas entonces agrega igual antes de </ul>este código:

<li><a href="#">Otra pestaña</a>
<ul>
<li><a href="URL del enlace">Subpestaña 1</a></li>
<li><a href="URL del enlace">Subpestaña 2</a></li>
<li><a href="URL del enlace">Subpestaña 3</a></li>
</ul>
</li>

Y ahora sí, quienes usan este menú o quienes quieran usarlo ya no se complicarán para poder personalizar sus colores pues todo se podrá hacerse directo desde la plantilla sin necesidad de alojar nada en ninguna parte.

Este menú usa jQuery, así que si ya tienes jQuery en tu plantilla recuerda dejar sólo la versión más reciente y/o la que sea compatible con todas las aplicaciones que uses.

Fecha: 08/11/2018

Fuente: masaudaz

Publicado por: