JQuery
Posted in: Jquery
Bonjour a tous,
Je m’intéresse de plus en plus à jQuery et je l’utilise à mon travail ( projet 24/24 actu pour Orange )
Je commence à mettre en place des plugins et je vous en propose un, qui sera je pense, très utile pour les personnes voulant apprendre à créer un plugin sous jQuery et pour les personnes qui souhaiterait un menu à 1 niveau pour leur site.
Son utilisation en est très simple
( j’utilise la version 1.3.1 de jQuery )
dans le head
…
<script type=”text/javascript” src=”lib/jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”plugin/jquery.simpleMenu.js”></script>
…
ensuite dans le corps html, mettezun structure ul, li
<ul class=”simpleMenu”>
<li>Allemagne</li>
<li>Belgique</li>
<li>Espagne</li>
<li>France</li>
<li>Italie</li>
<li>Suisse</li>
</ul>
enfin dans le head à nouveau, après la déclaration de l’appel des script, insérez les lignes de codes suivantes
<script type=”text/javascript”>
$(function(){
$(’.simpleMenu’).simpleMenu();
});
</script>
Bien sur ce plugin a plusieurs propriétés
<script type=”text/javascript”>
$(function(){
$(’.simpleMenu’).simpleMenu({
position : ‘horizontal’, // alignement vertical ou horizontal
padding : ‘5px 5px 5px 5px’, // espacement dans l’élément
background : ‘#ddd’, // couleur arriere plan
backgroundHover : ‘#000′, // couleur arriere plan sur rollOver
color : ‘#000′, // couleur du texte
colorHover : ‘#fff’, // couleur du texte sur rollOver
bold : ‘normal’, // mise en gras ou nom
boldHover: ‘bold’, // mise en gras ou nom sur rollOver
textAlign : ‘center’, // alignement du texte
family : ‘verdana’, // type de police pour le texte
fontSize: ‘9px’ // taille de la police
});
});
</script>
et voici un exemple
A vous de continuer en ajoutant les liens et tout ce qui vous sera utile pour en faire un menu!
++
Return to: JQuery
Social Web