jGlideMenu es un men? vertical que se puede arrastrar y soltar para que el lector lo ubique donde quiera, pero adem?s, se puede navegar a trav�s de sus pesta?as de una forma muy peculiar y con un efecto deslizante para darle ese toque sexy.
Una de las ventajas que tiene es que puede almacenar un gran n?mero de enlaces, y que se puede quitar el efecto drag and drop (arrastrar y soltar) si se desea.
Para que entiendas mejor este men? hay que verlo en acci?n en este blog de pruebas, ah? puedes arrastrar el men?, navegar en sus pesta?as, y cerrarlo.
Una de las ventajas que tiene es que puede almacenar un gran n?mero de enlaces, y que se puede quitar el efecto drag and drop (arrastrar y soltar) si se desea.
Para que entiendas mejor este men? hay que verlo en acci?n en este blog de pruebas, ah? puedes arrastrar el men?, navegar en sus pesta?as, y cerrarlo.
Para poner en tu blog este men? vertical, primero descarga este archivo, descompr?melo y s?belo a un hosting.
Luego ingresa a la Edici?n HTML de tu plantilla y antes de </head> agrega los scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' />Coloca la URL del archivo que subiste previamente donde se indica, luego pega antes de
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript' />
<script src='URL del archivo' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();
$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>
]]></b:skin> los estilos:
.jGM_box {
position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */
width: 227px;
height: 317px;
background: #fff; /* Color de fondo */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Borde */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Color de fondo de la barra de arriba */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Tama?o de la descripci?n */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Color de la descripci?n */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6; /* Color de fondo barras */
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Color de la barra al pasar el cursor */
}
.jGM_more {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_krXKhP177xP1eJqKLnpeL040YNJ0ecnOJr4sbxND0ND3Ul81US9LlHQCYH_PK-bgQkN1vTLyBLKikDDMnyok-m7UAKf652I3owuLzVNwFQIBhZIrkpbp_GMIbSlhr6t1v_K69NEYLzI/s10/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "atr?s" */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color del enlace "atr?s" al pasar el cursor */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "inicio" */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color del enlace "inicio" al pasar el cursor */
background: #4D4E67;
}
Ahora en un elemento HTML/Javascript pega la estructura del men?:
<div class="jGM_box" id="jGlide_001">Agrega las URLs de los enlaces y los nombres de las pesta?as y listo.
<!-- Aqu? todos los enlaces del primer nivel -->
<ul id="tile_001" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del primer nivel">
<li rel="tile_002">Enlace 1</li>
<li rel="tile_003">Enlace 2</li>
<li rel="tile_004">Enlace 3</li>
<li rel="tile_006">Enlace 4</li>
<li rel="tile_007">Enlace 5</li>
<li><a href="URL del enlace">Enlace 6</a></li>
<li><a href="URL del enlace">Enlace 7</a></li>
<li><a href="URL del enlace">Enlace 8</a></li>
<li><a href="URL del enlace">Enlace 9</a></li>
<li><a href="URL del enlace">Enlace 10</a></li>
<li><a href="URL del enlace">Enlace 11</a></li>
</ul>
<!-- Aqu? todos los enlaces del segundo nivel -->
<ul id="tile_002" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li rel="tile_005">Enlace 1.1</li>
<li><a href="URL del enlace">Enlace 1.2</a></li>
<li><a href="URL del enlace">Enlace 1.3</a></li>
<li><a href="URL del enlace">Enlace 1.4</a></li>
</ul>
<ul id="tile_003" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 2.1</a></li>
<li rel="tile_008">Enlace 2.2</li>
<li><a href="URL del enlace">Enlace 2.3</a></li>
</ul>
<ul id="tile_004" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 3.1</a></li>
<li><a href="URL del enlace">Enlace 3.2</a></li>
<li><a href="URL del enlace">Enlace 3.3</a></li>
</ul>
<ul id="tile_006" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 4.1</a></li>
<li><a href="URL del enlace">Enlace 4.2</a></li>
<li><a href="URL del enlace">Enlace 4.3</a></li>
</ul>
<ul id="tile_007" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>
<!-- Aqu? todos los enlaces del tercer nivel -->
<ul id="tile_005" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del tercer nivel">
<li><a href="URL del enlace">Enlace 1.1.1</a></li>
<li><a href="URL del enlace">Enlace 1.1.2</a></li>
</ul>
<ul id="tile_008" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del tercer nivel">
<li><a href="URL del enlace">Enlace 1.2.1</a></li>
<li><a href="URL del enlace">Enlace 1.2.2</a></li>
</ul>
</div>
Si quieres agregar m?s enlaces al primer nivel a?ade en esa ?rea otra l?nea como esta:
<li><a href="URL del enlace">Enlace 12</a></li>
Si quisieras que el enlace tenga otro nivel entonces la l?nea ser? as?:
<li rel="tile_0010">Enlace 5</li>Luego en el ?rea del segundo o tercer nivel agregar?as un fragmento as?:
<ul id="tile_0010" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>
Aqu? hay que tener algo muy en cuenta, si te fijas el enlace lleva el atributo REL, que debe ser el mismo que el ID que ponemos en el segundo nivel, estos IDs nunca se debe repetir, siempre ser?n ?nicos.
S?, suena complicado, pero una vez que entendemos el concepto ya no lo es tanto.
En el ?rea de los estilos est?n las partes que podemos personalizar. Si quisieras que el men? est� est?tico, es decir, que est� en la sidebar y no se arrastre, entonces elimina del primer c?digo el script que est? en cursiva. Y de los estilos elimina esta parte:
position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */
Cuando sean muchos enlaces entonces aparecer?n unas flechitas, pasando el cursor sobre ellas se mostrar?n el resto de los enlaces ya sea hacia arriba o hacia abajo.
A lo largo de la estructura del men? ver?s que puedes cambiar el nombre Men? as? como las descripciones.
Es un men? con jQuery as? que ya saben que hay que tomar en cuenta la versi?n que sea s?lo una, y la compatibilidad con Scriptaculous.
V?a | Sonicradish
No comments:
Post a Comment