fancymenu

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