Fancy Sliding Tab Menu V2

Publicado por Nikko el dia 15 Sep 2007 - Guardado en 307 Views Javascript, Diseño Web 307 Views

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.

PLAIN TEXT

JavaScript:

<script src="js/prototype.js" type="text/javascript"></script>
<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:

PLAIN TEXT

CSS:

#accordion {
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:

PLAIN TEXT

HTML:

<div id="accordion"> comienzo menu acordeon
<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

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!

Webramientas

15 - 09 - 2007


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


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


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


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


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


[...] Fancy Sliding Tab Menu V2 - XYbernéticos [...]
Jaider

15 - 09 - 2007


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


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!

Xyberneticos

Fancy Sliding Tab Menu V2