bonjour,
voila j ai adorer le menu vu sur ce site
http://www.id-interactive.fr/design-site-internet.html
et qui vraiment bien mais je n ai pas trouver de site en javascript et css qui pourrait faire cela auriez vous une solution ? MERCI
bonjour,
voila j ai adorer le menu vu sur ce site
http://www.id-interactive.fr/design-site-internet.html
et qui vraiment bien mais je n ai pas trouver de site en javascript et css qui pourrait faire cela auriez vous une solution ? MERCI
Salut,
Le site que tu donnes en exemple a en fait un menu horizontal sur 2 niveaux.
Le survol d'un élément du premier niveau fait apparaître le second niveau correspondant à la place.
Si tu veux "t'amuser" à le faire toi-même il y a de très bons tutoriels sur ce sujet (menu horizontal)
A+
Voici un petit exemple rapide...
CSS
JAVASCRIPT (jQuery)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 .menu {line-height: normal; font-size: 93%; display: block; float: left; margin: 0; padding: 0;} .niveau1, .niveau2 {padding: 10px 10px 10px 10px; margin: 0px; list-style-image: none; list-style-position: outside; list-style-type: none; display: inline-block; position: relative;} /* .niveau2 {display:none;} */ .menu_item, .sub_item {float: left; margin:0 2px; padding:0 9px; display: list-item; position: relative;}
Html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <script src="./jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { /* mise en place des évènements du menu déroulant */ $(".sub_item").css("cursor", "pointer"); $(".menu_item").css("cursor", "pointer").hover(function() { $(".niveau2").hide(); $("#menu_"+$(this)[0].id).show(); }); /* mise en forme de l'option de menu sélectionnée */ var it = window.location.hash; $("a[href$="+it+"]", ".niveau2").css("font-style","italic").css("font-weight","bold"); }); </script>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <div class="sub_menu" style="position: absolute; display:block; top:5px; left:0; width:auto; height:30px; margin:0 10px; background:yellow;"> <ul class="niveau1" style="background:olive;"> <li id="item1" class="menu_item" style="background:orange;">Item 1</li> <li id="item2" class="menu_item" style="background:orange;">Item 2</li> <li id="item3" class="menu_item" style="background:orange;">Item 3</li> <li id="item4" class="menu_item" style="background:orange;">Item 4</li> <li id="item5" class="menu_item" style="background:orange;">Item 5</li> </ul> </div> <div class="menu" style="position: absolute; display:block; top:50px; left:0; width:auto; height:30px; margin:0 10px; background:yellow;"> <ul id="menu_item1" class="niveau2" style="background:olive;"> <li id="item11" class="sub_item" style="background:orange;">Item 1-1</li> <li id="item12" class="sub_item" style="background:orange;">Item 1-2</li> <li id="item13" class="sub_item" style="background:orange;">Item 1-3</li> <li id="item14" class="sub_item" style="background:orange;">Item 1-4</li> <li id="item15" class="sub_item" style="background:orange;">Item 1-5</li> </ul> <ul id="menu_item2" class="niveau2" style="background:olive;"> <li id="item21" class="sub_item" style="background:orange;">Item 2-1</li> <li id="item22" class="sub_item" style="background:orange;">Item 2-2</li> <li id="item23" class="sub_item" style="background:orange;">Item 2-3</li> </ul> <ul id="menu_item4" class="niveau2" style="background:olive;"> <li id="item41" class="sub_item" style="background:orange;">Item 4-1</li> <li id="item42" class="sub_item" style="background:orange;">Item 4-2</li> <li id="item43" class="sub_item" style="background:orange;">Item 4-3</li> <li id="item44" class="sub_item" style="background:orange;">Item 4-4</li> <li id="item45" class="sub_item" style="background:orange;">Item 4-5</li> <li id="item46" class="sub_item" style="background:orange;">Item 4-6</li> </ul> </div> </body> </html>![]()
bonjour,
tu as un exemple dans la galerie CSS :
http://css.developpez.com/galerie/?p...orizontaux#MH4 qui n'utilise pas JQuery![]()
Exact, mais je pense que les "float" peuvent être évités (même pour la compatibilité avec FF2 et IE6) j'ai déjà réussi à les éliminer dans d'autres cas
(je me suis fait des tags genre "80x15" en CSS, c.f. pièce jointe, c'est plus souple que de simples images et la solution sans float que j'utilise peut peut-être s'adapter aux menus UL/LI)
Remarque: le tag est compatible IE6 également, c'est la page dans laquelle je l'utilise qui ne l'est pas![]()
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager