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.
