What is this? From this page you can use the Social Web links to save JQuery to a social bookmarking site, or the E-mail form to send a link via e-mail.

Social Web

E-mail

E-mail It
April 18, 2009

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>

librairie jQuery utilisé

plugin simpleMenu

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