Réalisons simplement avec jQuery un petit menu dynamique sous SPIP avec apparation des titres des articles lors du survol du logo.
Pas la peine ici de faire la promo ni de SPIP, ni de Jquery, mais juste vous montrer une chose assez simple à réaliser.
L’idée est d’afficher dans une liste une suite de logos d’articles d’une rubrique précise et qu’au survol le titre s’affiche sous cette liste de logos.
La liste avec la boucle dans la page rubrique se présente ainsi :
<B_cinq>
<ul id= »cinq »><BOUCLE_cinq(ARTICLES){id_rubrique}{par num titre}>
[<li><div id= »logo#ID_ARTICLE »>(#LOGO_ARTICLE|#URL_ARTICLE|image_reduire{140}|image_recadre{67,67,center}|inserer_attribut{‘alt’,#TITRE})</div>
<div id= »#ID_ARTICLE »>#TITRE</div>
</li>]
</BOUCLE_cinq>
</ul>
</B_cinq>
le style CSS :
#container #content ul#cinq li{
float:left;
margin-right:9px;
width:67px;
}
Bon jusque là rien de compliqué…
Maintenant on va faire disparaître grâce à jQuery la div qui contient le titre de l’article, puis le faire apparaître lorsque la souris survole le logo :
<script type= »text/javascript »>
$(document).ready( function () {
<BOUCLE_div(ARTICLES){id_rubrique}{par num titre}>
$(‘#container #content ul#cinq li div##ID_ARTICLE’).css(« display », »none »);
$(‘#container #content ul#cinq li div#logo#ID_ARTICLE’).mouseover(function(){
$(‘#container #content ul#cinq li div##ID_ARTICLE’).css({ display: « inline », position: « absolute », left: « 0px », top: « 120px »});
});
$(‘#container #content ul#cinq li div#logo#ID_ARTICLE’).mouseout(function(){
$(‘#container #content ul#cinq li div##ID_ARTICLE’).css({ display: « none »});
});
</BOUCLE_div>
})
</script>
Et voilà…
On peut aussi ajouter un effet typo avec cufón en ajoutant dans la boucle du jQuery :
Cufon.set(‘fontFamily’, ‘nomDeVotreFichierPoliceEnJsCufon’)
.replace(‘#container #content ul#cinq li div##ID_ARTICLE’, {color:’#333333′,fontSize:’15px’});
Voilà, votre effet fonctionne…
Bientôt je vais pouvoir vous montrer un exemple concret sur une réalisation de site qui se termine…