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 » </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à!
SCARICA LA GRAFICA PER LA BARRA >>
Update 01/08/2011: Ho predisposto anche una grafica “base” per la barra, buon download!
Alla prossima!
carino =) bravo bell’articolo
Ciao bello script, è possibile invertire il processo? Ovvero barra piccola all’inizio e poi quella grossa?
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.
@ luca si certo basta che inverti nello script i due tipi di barra 😉
si hai ragione Riccardo provvedo a correggere xD
grazie per la condivisione! Però non mi funzionava se non mettevo
tra gli head
Bhè certo silvia in linea di massima metti gli script jquery sempre tra gli
😉Ottimo!, proprio quello che cercavo, grazie mille…
Volevo cedere per il blog si po usare ??? e volevo che se apre e si chiude a un tempo determinato come fare ???
Ciao Colorbis può essere usato per tutti i tipi di blog, per farlo chiudere o aprire a un tempo determinato usa il comando delay():
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
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 =)
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.
si certo che si può fare =) appena posso faccio l’articolo 😉
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!
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.
ti ringrazio infinitamente!
Figurati per così poco 😉 continua a seguirmi! =)
Lo cercavo da tempo. Qui trovo tutto Riccardo! Grande lavoro.
Scusate, si puo’ sapere dove aggiungere questo codice? grazie 🙂
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.
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 😉
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 😉
Salve, in wordpress come dovrei mettere le parti di codice?
In header.php di solito, ovviamente il css va in style.css del tuo tema.
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.
Su blogger non riesco a farlo funzionare :(((
Esce errore su questa parte di codice: “apri »” sembra non essere valido
Grazie
L’errore riguarda la riga 14 della parte HTML
Non riesco a copiarlo cul commento in modo corretto
Vorrei sostituire Apri e Nascondi con immagini (frecce o pulsanti) è possibile?
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?
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…
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 😉
Fatto! con “fixed” sta proprio in sovraimpressione! Anche troppo, si sovrappone persino al menù che è a scomparsa. Ma questa, è un’altra storia…
Per il secondo problema alza il parametro z-index del tuo menù, o – in alternativa – abbassa quello della barra 😉