jQuery

Creare un menu espandibile con jQuery

menu_espandibile_jquery

La realizzazione di una base per un menu espandibile con jQuery non è assolutamente nulla di difficoltoso se, logicamente, avete digerito tutte le guide e lezioni precedenti su jQuery.

Proviamo a vedere un esempio che potete provare in diretta perché è stato da me realizzato nell’header e, precisamente, sulle icone sociali Facebook, Twitter e Linkedin come notate anche nell’immagine introduttiva.

Si è trattato di agire nella parte html del file header.php in tal modo :

<div id=”header_social”>

<ul id=”iconbar”>
                    <li>
                        <a href=”http://www.facebook.com…
>
                            <img src=”….facebook.png” />
                              <span>Seguimi su Facebook</span>
                        </a>
                    </li>
                    <li>
                        <a href=”http://twitter.com/pecciola”>
                            <img src=”…twitter.png” />
                              <span>Seguimi su Twitter</span>                   
                        </a>
                    </li>

                    <li>
                        <a href=”http://www.linkedin.com/”>
                            <img src=”…linkedin.png” />
                              <span>Seguimi su Linkedin</span>                   
                        </a>
                    </li>
</ul>

</div> 

Nessuna riga di codice particolare da segnalare.

Passiamo al css che dovrete, logicamente includere nel file php in cui state realizzando il menu espandibile.

 

#header_social ul.iconbar li            {
    float:left;
    position:relative;
    margin-right:20px;
    background:#E8E8F9;
    border: 1px dashed #ffc0ff;
    overflow:hidden;
}
#header_social ul.iconbar a {
    text-decoration: none;
    outline: none;
    color:#d00000;
    display: block;
    width: 24px;
    padding: 10px;
    cursor:pointer;
}
#header_social ul.iconbar span    {
    width: 100px;
    height: 35px;
    position: absolute;
    display: none;
    line-height:110%;
    color:#409BED;
    padding-left: 10px;
}

 

Anche in tal caso nulla di particolare da segnalare anche perché potrete riadattare questo css alle vostre esigenze. Passiamo alla parte importante che è quella legata a jQuery :

 

jQuery.preloadImages = function()
{
    for(var i = 0; i<arguments.length; i++)
    jQuery(“<img>”).attr(“src”, arguments[i]);
}
jQuery.preloadImages(“facebook.png”, “twitter.png”, “linkedin.png”);

jQuery(document).ready(function(){
$(“#iconbar li a”).hover(
    function(){
      var iconName = $(this).children(“img”).attr(“src”);

      $(this).children(“img”).attr({src: iconName});
      $(this).animate({ width: “140px” }, {queue:false, duration:”normal”} );
      $(this).children(“span”).animate({opacity: “show”}, “fast”);
  },
   function(){
      var iconName = $(this).children(“img”).attr(“src”);
     var origen = iconName.split(“o.”)[0];
    $(this).children(“img”).attr({src: iconName});
    $(this).animate({ width: “24px” }, {queue:false, duration:”normal”} );
    $(this).children(“span”).animate({opacity: “hide”}, “fast”);
  });
});

 

Nella prima parte del codice appena presentato si caricano le immagini interessate con jQuery sfruttando il metodo preloadImages e in modo da averle già a disposizione nel momento in cui vogliamo applicare loro l’effetto desiderato.

Nella parte restante del codice, invece, si applica il metodo hover all’immagine e al link relativo in modo da gestire sia il momento in cui il puntatore del mouse si avvicina all’immagine e sia quando si allontana.

Vota questo articolo

Articoli simili

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.