Barra fissa a fondo pagina in jQuery con effetto a scomparsa

Questo articolo è per un nostro lettore “rubato” al forum di Html.it dove mi veniva chiesto il codice per una barra tipo Wibya a scomparsa. Così ho deciso di postare qui per condividere con voi tutto il codice. La barra risulta la scelta ideale per pubblicità o per menu “dinamici” davvero carini.

Bene iniziamo!

Costruiamo la barra

//HTML

<div id="banner">

   <div id="img_sx"></div>

   <div id="testo"><a href="http://www.targetweb.it/html5/guida-uso-e-novita-su-html5/" title="guida html5" target="_self"><img src="testo-pubb.png" /></a></div>

    <p class="nascondi">nascondi</p>

</div><!--fine banner-->

	<div class="apri"><span class="open">apri &raquo; </span></div>

Bene ora che abbiamo costruito lo scheletro possiamo passare a dare un aspetto un pò più carino alla nostra barra, nel mio caso ho pensato a una barra pubblicitaria. Ecco il codice CSS che ho usato.

//CSS

#banner{-moz-box-shadow: 0 8px 25px black;
-webkit-box-shadow: 0 8px 25px black;
box-shadow: 0 8px 25px black;
background-color: #EDEDED;
border-top: 3px solid #f47a28;
bottom: 0;
height: 59px;
left: 0;
margin: 0;
position: fixed !important;
width: 100%;
z-index: 99999;
display:none;
}

.nascondi{ position:absolute; top:0%; right:5%; cursor:pointer;}

.apri{
position:fixed; bottom:0%; right:5%;
cursor:pointer;
border-top: 2px solid #F60;border-right: 2px solid #F60; border-left: 2px solid #F60;
width:200px;
background:#EDEDED;
-moz-border-radius: 10px 10px 0 0px;
-webkit-border-radius: 10px 10px 0 0px;
border-radius: 10px 10px 0 0px; height:30px; display:none;
}

.open{ margin: 20px 0px 0px 50px;}

#img_sx{
width:80px; height:80px;
float:left;
background-image:url(img_sx.png);
margin-top:-30px;}

#testo{ margin:0 auto; padding:0; }

Come vedete il codice css è molto semplice in pratica ho usato del codice CSS3 come border radius (per il pulsante apri), e un pò di ombre per il banner principale per dargli un tocco di profondità. l’id img_sx non è obbligatorio ma contribuisce a rendere il banner più “pubblicitario”. Ovviamente potete inserire nella barra quello che più vi aggrada, come menu, link etc etc. Molto importante il display:none; delle classi apri e banner.

Ok ora animiamo il tutto con jQuery

<script type="text/javascript">

$(document).ready(function() { //inizio dom

       $("#banner").slideDown('slow'); //appena carica la pagina appare il banner

	 $(".nascondi").click(  //funzione per quando si clicca su nascondi
            function(){

            $("#banner").slideUp("slow"); //faccio nascondere il banner
	    $(".apri").slideDown("slow"); //faccio apparire il pulsante di ri-apertura

          });//fine chiudi banner

		 $(".apri").click(
                 function(){

                 $("#banner").slideDown('slow'); //faccio ricomparire il banner
	         $(".apri").slideUp("slow");  //chiudo il pulsante che è pronto per il nuovo ciclo

                });//fine ri-apri banner

}); //fine DOM

</script>

Per ulteriori informazioni consulta il codice commentato. Bene ora salvate il tutto e aprite il documento, et voilà!

Visualizza la DEMO >>

Scarica il SORGENTE  >>

SCARICA LA GRAFICA PER LA BARRA >>

Update 01/08/2011: Ho predisposto anche una grafica “base” per la barra, buon download!

Alla prossima!