Fancy Sliding Tab Menu V2
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
