Fancy Sliding Tab Menu V2 un bonito menú con efecto acordeón. Esta versión 2 incorpora otro nuevo efecto que se produce al dejar un rato el Mouse sobre una de las opciones, lo que hará que el menú vuelvo a su estado normal. El menú se desarrolla con script.aculo.us y como se menciona arriba tiene algunas características adicionales.
Demo - Descarga - Web Andrew Sellick
Instalación:
Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada.
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/tabslide.js" type="text/javascript"></script>
NOTA: Verificamos bien en “src” que la localización de loa script sea la correcta. ///
En nuestra hoja de estilo agregamos:
border: 1px solid #1F669B;
width: 600px;
height: 310px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
position:relative !important;
display:block;
overflow:hidden;
background-image:url(images/aston.jpg);
background-repeat:no-repeat;
background-position:top left;
}
h3 {
font-size: 12px;
padding: 6px 6px 4px 35px;
margin: 0;
color:#fff;
border-bottom:1px solid #333333;
cursor:pointer;
display:block;
background-image:url(images/tab-left.gif);
background-position:top left;
background-repeat:no-repeat;
}
#visible {
background-image:url(images/tab-left-active.gif);
border-bottom:1px solid #DA1074;
}
.panel_body {
height:150px;
background-color:#333333;
display:block;
position:relative;
color:#FFFFFF;
}
.panel_body div {
padding:3px 5px;
}
.panel{
bottom:0px;
margin:0px;
padding:0px;
background-image:url(images/tab-right.gif);
background-position:top right;
background-repeat:repeat-x;
background-color:#333333;
}
.wrapper{
bottom:0px;
position:absolute;
}
Contenido:
<div class="panel" id="panel1">
<h3>PANEL 1</h3>
<div id="panel1-body" class="panel_body">
<div>
Contenido del panel 1
</div>
</div>
</div>
<div class="panel" id="panel2">
<h3>PANEL 2</h3>
<div id="panel2-body" class="panel_body">
<div>
Contenido del panel 2
</div>
</div>
</div>
</div> cierre de menu acordeon
Via themesheaven
Loading ...
Webramientas
15-09-2007
Permalink
Muy bueno el menu, pero le he encontrado un pequeño fallo.
Al abrirse un panel, luego sólo se baja si vas a otro panel, no si sales del menu. Por lo que si pasas el ratón por encima del menú siempre se te quedará un panel abierto.
Nikko
15-09-2007
Permalink
pasa el Mouse por el menú...luego corre completamente el ratón, veras que al cabo de unos 8 segundos, los menús volverán a su estado normal ^_^
Webramientas
15-09-2007
Permalink
Cierto, ese valos se puede modificar en el archivo tabslide.js en las líneas 128 y 134:
slideTime = window.setTimeout( "resetTabs()", 10000 );
Fancy Sliding Tab Menu, menús con estilo con javascript « Cosas sencillas
15-09-2007
Permalink
[...] Actualización: En Xiberneticos tenemos el artículo Fancy Sliding Tab Menu V2, la versión 2 incorpora otro nuevo efecto que se produce al dejar un rato el ratón sobre una de [...]
ThemePassion - Best stuff about design! » Fancy Sliding Tab Menu V2
15-09-2007
Permalink
[...] Robin Good wrote an interesting post today!.Here’s a quick excerptFancy Sliding Tab Menu V2 un bonito menú con efecto acordeón. Esta versión 2 incorpora otro nuevo efecto que se produce al dejar un rato el Mouse sobre una de las opciones, lo que hará que el menú vuelvo a su estado normal. … [...]
Pamoorama - Biblioteca Javascript para visualizar imágenes panorámicas | pixelco.us blog
15-09-2007
Permalink
[...] Fancy Sliding Tab Menu V2 - XYbernéticos [...]
Jaider
15-09-2007
Permalink
Muy Bueno.
Se podra modificar para mostrar el efecto de arriba hacia abajo. de manera que al usarlo como menu en la parte de arriba se vea en cualquier resolucion, por que pienso usar una imagen muy grande 1016x406.
David
15-09-2007
Permalink
Hola!
Acbo de utilizar este efecto en una web que estoy creando y resulta que en Internet Explorer 6 no se me ve el efecto, es decir, las pestañas aparecen siempre arriba, es decir, como si estubieses con el ratón encima de todas las pestañas a la vez.
Sin embargo tanto en FF como en IE7 funciona perfectamente.
Alguien me puede dar una idea??
Muchas gracias!