Panel Vertical/Horizontal desplegable con jQuery

Panel Vertical/Horizontal desplegable con jQuery

DEMO: http://shellroot.vacau.com/
DOWNLOAD: http://www.mediafire.com/?jzrvuely99o139v
Más información: Panel Vertical/Horizontal desplegable con jQuery

Por cosas raras de la vida, necesitaba construir dos panales: uno horizontal y otro vertical, para la construcción de una aplicación, me costo un poco de trabajo y tiempo, así que lo compartiré con ustedes.

Aprenderemos a crear nuestro propio panel lateral desplegable basado en jQuery. Lo haremos partiendo de cero y explicándolo como siempre paso a paso, de forma que todos podamos comprender cómo funciona. Todo ello inspirándonos en el panel lateral de Google Reader.

ESTRUCTURA HTML
html5

Código

<!DOCTYPE html>
<html id="home" lang="en">
    <head>
        <meta charset=utf-8 />
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/jQuery.js"></script>
        <script src="js/toggler.js"></script>
        <title>PoC</title>
    </head>
    <body>
        <section id="wrapper">
            <header>
                #header
            </header>
 
            <section id="slideLeft">
                <div id="content">
                    #slideLeft
                </div>
            </section>
 
            <section id="contenido">
                <h1>#contenido</h1>
                <div id="togglerSlideLeft"></div>
                <div id="render">
                    #contenido
                </div>
            </section>
 
            <section id="slideBottom">
                <div id="togglerSlideBottom"></div>
                <div id="content">
                    #slideBottom
                </div>
            </section>
 
            <footer>
                <span>
                    #footer
                </span>
            </footer>
        </section>
    </body>
</html>

APLICANDO ESTILOS
css/style.css

Código

*{ padding:0; margin:0; }
html,body{ height:100%; overflow:hidden; }
body{ font-family:Helvetica, Arial, sans-serif; font-size:12px !Important; }
 
header{ height:40px; padding:10px; border-bottom:1px solid #c9d7f1; }
 
#slideLeft{ width:260px; height:100%; float:left; }
#slideLeft #content{ padding:10px; }
 
#contenido{ height:100%; margin-left:260px; }
#contenido h1{ height:40px; padding:0 10px; background:#c2cff1; font-size:18px; font-weight:bold; }
#contenido #togglerSlideLeft{ width:16px; border-left:1px solid #c2cff1; background:#EBEFF9 url("../img/togglerLeft.gif") no-repeat left center; float:left; }
#contenido #togglerSlideLeft:hover{ background: #c2cff1 url("../img/togglerLeft.gif") no-repeat -25px center; cursor:pointer; }
#contenido #togglerSlideLeft.off{ background: #EBEFF9 url("../img/togglerRight.gif") no-repeat left center; margin-left:0; }
#contenido #togglerSlideLeft.off:hover{ background: #c2cff1 url("../img/togglerRight.gif") no-repeat -25px center; margin-left:0; }
 
#slideBottom{ width:100%; }
#slideBottom #togglerSlideBottom{ width:100%; height:16px; border-top:1px solid #8c9dc8; background:#EBEFF9 url("../img/togglerDown.gif") no-repeat top center; }
#slideBottom #togglerSlideBottom:hover{ background: #c2cff1 url("../img/togglerDown.gif") no-repeat center -25px; cursor:pointer; }
#slideBottom #togglerSlideBottom.offBottom{ background: #EBEFF9 url("../img/togglerUp.gif") no-repeat top center; margin-left:0; }
#slideBottom #togglerSlideBottom.offBottom:hover{ background: #c2cff1 url("../img/togglerUp.gif") no-repeat center -25px; margin-left:0; }
#slideBottom #content{ padding:10px; }
 
footer{ width:100%; height:30px; text-align:right; line-height:30px; border-top:1px solid #8c9dc8; background:#C2CFF1; position:fixed; bottom:0; }
footer span{ padding-right:10px; }

AÑADIENDO INTERACCIÓN CON JQUERY
js/toggler.js

Código

// Iniciar cuando se termine de cargar la pagina.
$(document).ready(function(){
 
    // Variables para saber el estado de los slide's
    var estadoSlideLeft = true;
    var estadoSlideBottom = true;
 
    // Variables con los elementos de la pagina.
    var contenido = $("#contenido");
    var slideLeft = $("#slideLeft");
    var slideBottom = $("#slideBottom");
    var togglerSlideLeft = $("#togglerSlideLeft");
    var togglerSlideBottom = $("#togglerSlideBottom");
    var render = $("#render");
 
    // Variables con la medida reservada del slideBottom
    var slideBottomHeight = 150;
    var slideBottomWidth = 0;
 
    // Variables para las medidas
    var windowHeight;
    var togglerHeight;
    var renderHeight;
 
    // Calcular y aplicar medidas actuales al iniciar.
    calcularMedidas();
    aplicarMedidas();
 
    // Calcular y aplicar medidas actuales al cambiar el tamaño.
    $(window).resize(function(){
        calcularMedidas();
        aplicarMedidas();
    });
 
    // Agregar evento click del toggler la función.
    togglerSlideLeft.click( displaySlideLeft );
    togglerSlideBottom.click( displaySlideBottom );
 
    // Función para calculas las medidas
    function calcularMedidas(){
        windowHeight = document.documentElement.clientHeight;
 
        togglerHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
        renderHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
        slideBottomHeight = (slideBottomHeight - 21);
    }
 
    // Función para aplicar las medidas
    function aplicarMedidas(){
        slideBottom.css( "height", slideBottomHeight + 'px' );
        render.css( "height", renderHeight + "px" );
        togglerSlideLeft.css( "height", togglerHeight  +"px" );
    }
 
    // Función para mostrar/ocultar el slideLeft
    function displaySlideLeft(){
        if( estadoSlideLeft ){
            slideLeft.hide();
            contenido.css("margin-left", "0");
            togglerSlideLeft.addClass("off");
            estadoSlideLeft = false;
        }else{
            slideLeft.show();
            contenido.css( "margin-left", slideLeft.width()+'px' );
            togglerSlideLeft.removeClass("off");
            estadoSlideLeft = true;
        }
    }
 
    // Función para mostrar/ocultar el slideBottom
    function displaySlideBottom(){
        if( estadoSlideBottom ){
            slideBottomWidth = contenido.height() + parseInt(slideBottomHeight) - 6;
            slideLeft.css("height", slideBottomWidth + 'px' );
            togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
            contenido.css("height", slideBottomWidth + 'px' );
            render.css( "height", slideBottomWidth + "px" );
            togglerSlideBottom.addClass("offBottom");
            estadoSlideBottom = false;
        }else{
            slideBottomWidth = contenido.height() - parseInt(slideBottomHeight) + 6;
            slideLeft.css("height", slideBottomWidth + 'px' );
            togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
            contenido.css("height", slideBottomWidth + 'px' );
            togglerSlideBottom.removeClass("offBottom");
            estadoSlideBottom = true;
        }
    }
 
});

Sugerencias, aportes, fallas, comentarios, cualquier cosa es bienvenida.