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!

  1. Ciao credo di aver trovato un piccolo errore, hai settato la barra piccola con “position: absolute” invece che con “fixed”. Quando chiudi la barra queste si ferma in mezzo allo schermo.

  2. Ciao Colorbis può essere usato per tutti i tipi di blog, per farlo chiudere o aprire a un tempo determinato usa il comando delay():

    [...,].delay(2000).fadeIn(); per farlo apparire dopo 2 sec
    [...,].delay(2000).fadeOut(); per farlo scomparire dopo 2 sec
    
  3. Innanzitutto complimenti e grazie per la condivisione.

    Domanda: se al caricamento della pagina, volessi trovarmi con il banner nella posizione inversa, ossia nascosta, cosa dovrei modificare nello script?

    Grazie.
    Marco

  4. Al posto di banner all’inizio del codice JS sostituisci con .apri per visualizzare il pulsante di apertura anzichè il banner.

    Dopodichè basta che inverti dove c’è .apri metti #banner e cosi via =)

  5. Ciao bello script, ho da chiederti se è fattibile con questo script una piccola modifica: è possibile fare come su tumblr che quando clicchi sul div in basso anzichè chiudersi l’utente viene rimandato ad una sezione della pagina più bassa? ovvero quello che succede con le anchor text: se clicco su un anchor text vengo rimandato ad un punto più basso della pagina, però il div deve scomparire e non deve comparire neanche la finestrella per riaprirlo.

  6. Ciao,
    avrei una domanda, ho caricato lo script su un mio sito e con l’include l’ho messo il codice html in tutte le pagine. Però ovviamente se cambio pagina, lo script si ricarica e quindi torna ad aprire il banner. Però se precedentemente l’ho chiuso e continuo la navigazione, vorrei che rimanesse chiuso sino a quando l’utente non lo apre. Si può fare?
    grazie!

    1. Ciao Michele, prova a usare i cookie per verificare se l’utente ha già visitato e visto la barra. tramite un semplice ciclo if (isset cookie){NON MOSTRARE} else {APRI IL CODICE DELLA BARRA} puoi gestire il tutto.

    1. Ciao Derce, hai letto l’articolo? =D tutto il codice è diviso:

      HTML –> va nell’HTML
      CSS –> va nel CSS
      JS –> Va nel tuo documento (ti consiglio head ma va bene anche dentro il body).

      Ad ogni modo se hai altri problemi guarda come è strutturata la demo o scarica il file zip.

  7. ciao scusa,innanzitutto complimenti per la barra, è molto bella ma ho un problema.Nella mia risoluzione ovvero 1440×900 la barra si vede perfettamente ma se provo con un notebbok si vede male, come faccio a far si che si adatti a tutte le risoluzioni?

    grazie in anticipo 😉

    1. Devi per forza usare i media queries, usando quest’ultimi puoi adattarla addirittura al mobile/tablet e alla risoluzione che preferisci. Prova a cercare “responsive design” e “media queries” sia qui sul blog che su google 😉

  8. Ciao, veramente ottimo, ci sono riuscito anche io che non capisco nulla di html!!
    Ora volevo cambiare immagini ma non riesco a fargliele pescare in modo corretto… come posso fare?
    Grazie.

  9. Su blogger non riesco a farlo funzionare :(((
    Esce errore su questa parte di codice: “apri »” sembra non essere valido
    Grazie

  10. Complimenti per l’articolo!
    Ho usato il sorgente e nella barra ci ho messo un player.
    Pero’ al cambio della pagina la barra ovviamente sparisce.
    Come posso fare in modo che il player continui a funzionare senza interruzioni al cambio della pagina del sito?

  11. Ciao! Intanto grazie per la condivisione.
    Ho applicato le parti al mio documento però avrei bisogno di un cambiamento o di una correzione, non l’ho capito.
    Ecco quando clicco su “nascondi”, la barra proprio se ne va via! Non rimane la linguetta “apri”. Allora scorro in fondo pagina… e la ritrovo!!
    Le pagine del mio sito sono spesso parecchio lunghe…
    Mi piacerebbe perciò che la linguetta rimanesse sempre in sovraimpressione, mi potresti aiutare? :/
    Poi, una curiosità!
    Ho visto che lo script richiama le api jquery 1.6.x, invece il mio tema richiama quelle 1.10.x, questo vuol dire che lo script è antiquato nel linguaggio e dovrebbe essere riscritto?
    Scusa se la domanda non ha capo nè coda sono un newbie dei condici e di questi pastrocchi informatici, domando per capire come funzionano le cose…

    1. Ciao, fai bene a usare le ultime versioni di jQuery, l’importante che usi le 1.x.x.

      Il codice non è antiquato (nonostante l’articolo sia ormai datato) tutte le funzioni e proprietà sono ancora attuali 😉

      Per la barra in sovraimpressione prova a settare position:fixed all’elemento css in questo modo ti rimarrà in sovra-impressione come desideri 😉

      1. Fatto! con “fixed” sta proprio in sovraimpressione! Anche troppo, si sovrappone persino al menù che è a scomparsa. Ma questa, è un’altra storia…

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Icone social di Google Plus per web designer

Icone social di Google Plus per web designer