Rechercher
Vous avez vu il y a quelques temps un article qui vous plaisait ! Gagnez du temps et recherchez-le !
Catégories
Mes Créations
Liens
Nuage de Tag
- - - - - - - - - - - - - - - - - - - - - - - - - -
Menu sympathique Jquery
Par anonyma, le 26/01/2010 à 09:34:08 :: Jquery
Vous aller vous en rendre compte très vite mais c'est plutot tres simple... Il suffit d'un css basique un UL,LI et deux fonction Jquery
Commençons par le css...
.clear { clear: both }
#menu_holder ul{ list-style-type: none;}
#menu_holder ul li { float:left;width:100px;}
#menu_holder ul li a {display:block; width:100%; padding:10px; text-decoration:none;color:white;}
#menu_holder ul { margin:0px; padding:0px; }
#menu_holder ul li { color:white; font-size:20px; font-weight:bold; border:1px solid #000;}
#first_li{ background:url(./images_articles/img_1.jpg); height:300px}
#second_li{ background:url(./images_articles/img_2.jpg); height:300px}
#third_li{ background:url(./images_articles/img_3.jpg); height:300px}
Puis le Javascript utiliant les fonctions de Jquery
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
//declaration des variables
var speed = 200; //vitesse
var min_width = 100; //largeur minimum
var max_width = 350; //largeur maximum
//aanimation jusqu'a la largeur maximale
$('.selected').animate( { width : max_width } );
/* utilisation des fonctions Jquery '*/
$('#menu_holder ul li').hover(function(){
$(this).animate({ width : max_width }, { queue:false , duration:speed});
$(this).siblings().animate({ width : min_width }, { queue:false , duration:speed});
});
});
</script>
Le HTML...
<div id="menu_holder">
<ul>
<li id="first_li"></li>
<li id="second_li"></li>
<li id="third_li" class="selected"></li>
</ul>
<div class="clear">
</div>
Et voici le résultat...
Menu deroulant utilisant Jquery
Par anonyma, le 09/01/2010 à 12:18:22 :: Jquery
Tout d’abord j’ai commencé par le code HTML. Pour expliquer brièvement toutes la structure du menu est basé sur les balises ul/li.
<div id="menu">
<ul id="ul_menu">
<li>
<a href="#" class="ecriture_menu">Menu 1</a>
<ul class="Smemu">
<li><a href="#" class="ecriture_smenu">Sous menu 1</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 2</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 3</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 4</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 5</a></li>
</ul>
</li>
<li>
<a href="#" class="ecriture_menu">Menu 2</a>
<ul class="Smemu">
<li><a href="#" class="ecriture_smenu">Sous menu 1</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 2</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 3</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 4</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 5</a></li>
</ul>
</li>
<li>
<a href="#" class="ecriture_menu" id="asmenu3">Menu 3</a>
<ul class="Smemu">
<li><a href="#" class="ecriture_smenu">Sous menu 1</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 2</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 3</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 4</a></li>
<li><a href="#" class="ecriture_smenu">Sous menu 5</a></li>
</ul>
</li>
</ul>
</div>
Ensuite vient le css qui permet de rendre un peu plus jolie le menu et qu’il soit surtout en ligne.
<style type="text/css">
body{margin:0px; padding:0px}
#menu{margin:0 auto; width:auto}
#ul_menu{margin:0px; padding:0px}
#ul_menu li{ width:150px; text-align:center; height:40px; float:left; list-style-type:none; border:1px solid #FFF; background-color:#333}
#ul_menu li:hover{ background-color:#999}
#ul_menu a{ display:block; width:100%; height:30px; text-decoration:none; padding-top:10px}
#ul_menu a:hover{color:#333}
#ul_menu .Smemu{display:none}
#ul_menu .Smemu li{ margin-left:-41px; height:30px}
#ul_menu .Smemu a{ display:block; width:100%; height:25px; text-decoration:none; padding-top:5px}
.ecriture_menu{font-family:Verdana, Geneva, sans-serif; font:Verdana, Geneva, sans-serif; font-size:15px; color:#CCC}
.ecriture_smenu{font-family:Verdana, Geneva, sans-serif; font:Verdana, Geneva, sans-serif; font-size:13px; color:#CCC}
</style>
On aurait pu utiliser que CSS pour activer ou non les sous menu grâce a la classe :hover mais Jquery permet des animations plutôt sympa. Pour ma part j’ai choisi le fadeIn, fadeOut, en gros l’apparition et la disparition en fondu…
Jquery a besoin de deux fichiers pour fonctionner Jquery.js et interface.js. Ce sont les fichiers de librairie qui contiennent toutes les fonctions...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript">
var obj = null;
function checkHover() {//fonction de disparition
if (obj) {
obj.children('ul').fadeOut('fast');
} //if
} //checkHover
$(document).ready(function() {
$('#ul_menu > li').hover(function() {
if (obj) {//si l'objet est présent, il est déroulé, donc on le fait disparaitre
obj.children('ul').fadeOut('fast');
obj = null;
} //sinon, on le fait apparaitre lorsque l'on passe la souris dessus
$(this).children('ul').fadeIn('fast');
}, function() { //on fait disparaitre si on est plus sur l'élément au bout de 0 seconde
obj = $(this);
setTimeout(
"checkHover()",
0); // si vous souhaitez retarder la disparition, c'est ici
}), $('.Smemu > ul').hover(function(){//fonction qui fait "clignoter une fois" l'entrée du menu au passage de la souris
$(this).fadeTo('slow', 1000);
$(this).fadeTo('normal', 100);});
});
</script>
Voici le résultat…