jQuery: barra ad espansione all’hover del mouse

Nella guida jQuery di oggi vediamo come creare una barra che si espande all’hover del mouse ideale per pubblicità e comunicazioni importanti per i vostri visitatori.

Demo barra comunicazioni Demo barra ADV

Panoramica della barra ad espansione jQuery

Lo script è estremamente utile in quanto vi permette di impostare nel vostro sito una comoda barra che si espande all’hover del mouse. Potete personalizzare la barra (e il suo contenuto) come meglio credete, con, ad esempio pubblicità o altro. Nelle demo sopra-indicate trovate ad esempio una barra di notifica e una barra adv ( NOTA: le demo sono fornite nello zip del download).

How-To #1: Impostare lo script

Struttura HTML

  <div id="advsection">
    <p>Comunicazione importante qui.</p>
    <div id="advfull">
      <a class="close">x</a>
      <p>Qui puoi facilmente inserire qualsiasi cosa desideri: Testo - Video - Immagini - Iframe</p>
    </div><!--adv full -->
  </div><!--adv section -->

Stile CSS

   /*Stile barra iniziale */
   #advsection { height:40px; width: 1000px; background: #d9edf7; border: 1px solid #bddeef; cursor: pointer; overflow:hidden; position: relative;}

   /*Stile barra/box espanso */
   #advfull{   height:120px; width: 1000px; background: #d9edf7; margin:0px 0px 0px 0px; display: none;  }

   /*Stile testo e varie */
   #advfull p{ margin:0px; padding:20px;}
   #advsection p{ margin:0px; padding:10px;}

   /*Stile pulsante di chiusura*/
   .close{ font-size: 20px; position: absolute; top: 20px; right: 30px; cursor: pointer;}

Codice jQuery

 <!-- Js -->
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="js/targetweb-bar.js"></script>
 <script>
 $(function() {

  //Lista Opzioni
  //01. ID del contenitore iniziale
  //02. ID del contenitore espanso
  //03. Classe "close" per la chiusura 
  //04. Altezza Status iniziale: es. 40 = 40px
  //05. Velocità dello slideUp: es.500 
  //06. Apertura automatica: true/false
  //07. Timing per la chiusura automatica (se impostata): es. 7000 = 7sec

  TargetwebBar('advsection','advfull','close','40','100','true','7000');

 });//DOM
 </script>

Come sempre vi invito a visionare i commenti al codice per comprendere al meglio come integrare lo script.

How-To #2: Impostare lo script in WordPress

  • Aprite il file style.css del vostro tema e inserite lo stile CSS presente nel capitolo precedente.
  • Copiate lo script js targetweb-bar.js presente nello zip del download nella cartella js o javavascript del vostro tema.
  • Aprite il file header.php e aggiungete nell’head della pagina il codice JS per richiamare lo script in questo modo:
 <!-- Js -->
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/targetweb-bar.js"></script>
 <script>
 $(function() {

  //Lista Opzioni
  //01. ID del contenitore iniziale
  //02. ID del contenitore espanso
  //03. Classe "close" per la chiusura 
  //04. Altezza Status iniziale: es. 40 = 40px
  //05. Velocità dello slideUp: es.500 
  //06. Apertura automatica: true/false
  //07. Timing per la chiusura automatica (se impostata): es. 7000 = 7sec

  TargetwebBar('advsection','advfull','close','40','100','true','7000');

 });//DOM
 </script>

Per ultima cosa inserite il codice HTML presente nel capitolo precedente nel vostro tema subito sotto il tag body oppure ovunque vogliate nel vostro tema.

Conclusioni e Download

Demo barra comunicazioni Demo barra ADV

Per scaricare lo script effettua una donazione cliccando sul link sottostante. Donazione minima 1€, scegli tu quanto donare sopra questa cifra! Nello zip del download troverete entrambe le demo in versione completa (Barra per comunicazioni e barra per adv).

Fra i futuri sviluppi della barra avrei intenzione di creare un plugin per WordPress così da renderlo facilmente integrabile con il vostro blog senza intervenire nel codice. Per ora potete facilmente integrare la barra ad espansione scaricando lo script indicato e seguendo quanto riportato nella sezione How-To #2. Qualora ricevessi segnalazioni sarà mia cura creare  guide ad Hoc per l’integrazione anche con gli altri CMS di largo uso.

  • Hai domande tecniche e vuoi richiedere supporto? Fammi la tua richiesta qui
  • Vuoi lasciare il tuo feedback? Commenta qui sotto!

Lascia la tua opinione

2 comments

×