Menu horizontal com efeito deslizante (atualizado)

Menú horizontal con efecto deslizante (actualizado)

El menú horizontal con efecto deslizante, 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.

El menú en cuestión es el siguiente:

Bien, empecemos a colocar este menú horizontal con subpestañas y efecto deslizante en el blog.

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.

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6yy39Ihd8UkYtEGshhEelxlOSmQRaVraxhROBAow_GHy0ihqHBX3G9vdO5lr0uCZxireH7Ajf1Nr_aGx6YxN_ycBR-LIDoq4PDZqv8rgDGmh-Kku7y7uTirDpUyXY4tYMZX0dupUtxg1/', 23], right:['rightarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlfEXs627nUyREbxzSEdurUxzeuvevlitf1h9TFKy6t6QVm37p-XaigtLWyaHUf5LY4zOIjFvX2GptZvXi6kn0vVYfJwsAwe06wjkgnqo6wxrvHMYyo7wMvzC-Epf1e6yauKObsiYKz8LS/']}

var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1) 
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},
function(e){
var 
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animateduration.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>

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;
}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript. Ahí pega la estructura del menú:

<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.

fonte:
ciudadblogger



Traduzido:

"Menu horizontal com efeito deslizante (atualizado)"

"O menu horizontal com deslizamento de efeito , é uma ementa feita com sub-seções jQuery que exibe suas sub-seções com um leve escorregão e, embora publicado há muito tempo, é um dos menus que eu vi aqui que uso muito, como é um menu que se adapte modelo de muitos estilos."

"No entanto, alguma luta quando quer personalizá-lo, e ele está sendo hospedado em um. Hospedagem tanto o roteiro e os estilos CSS, torna mais simples para alguns para fazer alterações para dar aquele toque pessoal"

"Portanto, neste post vamos ver o mesmo menu, mas desta vez nem o roteiro nem ficar os estilos em qualquer servidor, tudo está dentro do modelo para torná-lo muito mais fácil fazer mudanças, e vamos usar uma nova versão do jQuery, e como um pilão, e as mudanças que eles possam usá-lo junto com Scriptaculous e Prototype sem nenhum problema.

O menu em questão é a seguinte:

Bem, vamos colocar esse menu horizontal com sub-abas e efeito de deslizamento no blog.

ATENÇÃO: Se você estiver usando um modelo feito através do Designer de modelo do Blogger primeiro precisa seguir os passos deste post .

Para começar, vamos chegar ao Editar HTML e adicionar antes de </ head> scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6yy39Ihd8UkYtEGshhEelxlOSmQRaVraxhROBAow_GHy0ihqHBX3G9vdO5lr0uCZxireH7Ajf1Nr_aGx6YxN_ycBR-LIDoq4PDZqv8rgDGmh-Kku7y7uTirDpUyXY4tYMZX0dupUtxg1/', 23], right:['rightarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlfEXs627nUyREbxzSEdurUxzeuvevlitf1h9TFKy6t6QVm37p-XaigtLWyaHUf5LY4zOIjFvX2GptZvXi6kn0vVYfJwsAwe06wjkgnqo6wxrvHMYyo7wMvzC-Epf1e6yauKObsiYKz8LS/']}

var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1) 
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},
function(e){
var 
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animateduration.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>

Então, antes de ]]> </ b: skin> cole os 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;
}

Finalmente entra Design | Elementos da página | Adicionar Gadget | HTML / Javascript , ou se você está usando a nova interface vem em Design | Adicionar um gadget | HTML / Javascript .Essa estrutura de menus colar:

<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>

Adicionar URLs dos links e nomes dos separadores onde indicado e pronto. 
. cor verde identifica as áreas que podem ser personalizados, como a cor de fundo, a cor dos links, etc. 

. setas sub-seções são as imagens e pode ser alterada no primeiro código, substituindo as URLs em laranja.

Se você quiser adicionar outra guia apenas adicionar antes do último </ ul> uma linha como esta:

<li> <a href = " URL do link "> Outra Tab </ a> </ li>

Se você quiser adicionar um outro guia que contém sub-seções em seguida, adicione um pouco antes </ ul> este código:

<li> <a href="#"> Outro guia </ a> 
<ul> 
<li> <a href = " URL do link "> Sub-guia 1 </ a> </ li> 
<li> <a href = " Link URL "> Sub guia-2 </ a> </ li> 
<li> <a href = " URL do link "> guia Sub-3 </ a> </ li> 
</ ul> 
</ li>

E agora, aqueles que usam deste menu ou que já não quer usá-lo para complicar suas cores para personalizar porque tudo pode ser feito diretamente a partir do modelo de hospedagem sem nada a lugar nenhum. Este menu usa jQuery , então se você já tem jQuery sua equipe lembre-se de deixar apenas a versão mais recente e / ou ser compatível com todos os aplicativos que você usa.