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.
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'/>Luego, antes de ]]></b:skin> pega los estilos:
<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/AVvXsEgee6zGY8v4YJuq0gjLwTLKz1ZM0De5BwAfjRBuoehyphenhyphenpvt5JoRehxRerO_ay_8fbErQezCVnmx-lU_pQHUzDMULNJFho5EE1R1NPJ-VvU6h4sXF8oPj-qxC2-1t6fpocX99twde6Ms23lca/', 23], right:['rightarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSN7TdYZRtuHMcjvL-ljzN_3MYLoixR1xgjOmxWPOqPids_El9pC65VjwEXYiPuWQzVRAMzGfeZ2lgIGt9v5vdnKeKYKNGhCoNwgTz4FjLFEAO898UDmOiK9xulY3sU3eCOhYoR21Ag4l/']}
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>
/* Men? horizontal deslizantePor ?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?:
----------------------------------------------- */
.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.
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>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.
<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>
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.
No comments:
Post a Comment