Bon j'ai adapté un menu choppé sur le net
mais il y a juste deux trucs que je n'arrive pas à faire ...
voici le code:
le html:le css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <ul id="nav"> <li><a href="#">Accueil</a></li> <li><a href="#">Présentation</a></li> <li><a href="#">Partenaires </a> <ul > <li ><a class="sm" href="#">Plafonds</a></li> <li ><a class="sm" href="#">Platrerie</a></li> <li ><a class="sm" href="#">Isolation</a></li> <li ><a class="sm" href="#">Planchers Techniques</a></li> <li ><a class="sm" href="#">Cloisons</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul>
et le js jquery:
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81 #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside; position:absolute; line-height:1.5em; right:5%; top: 20px; } #nav a{ font-size:20px; font-weight:normal; display:block; padding: 10px 25px 10px 25px; color:rgb(0,158,224); text-decoration:none; width:110px; height:30px; text-align:center; } #nav a:hover{ background-repeat:no-repeat; background-image:url("../../SitePics/Bg.gif"); } .sm:hover{ background-color:#fff; } #nav li{ float:left; position:relative; } #nav ul { position:absolute; display:none; width:12em; top:2.5em; left:3em; } #nav li ul a{ font-size:12px; font-weight:normal; text-align:center; background-color:rgb(208,207,203); border: solid 1px rgb(0,158,224); padding: 0 5px; width:12em; height:auto; float:left; position:relative; z-index:5; } #nav ul ul{ top:auto; } #nav li ul ul { left:12em; margin:0px 0 0 10px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; }
Mon premier souci est que lorsque je quitte le hover principal pour le sous menu, le background image disparait ...
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 function mainmenu(){ $(" #nav ul ").css({display: "none"}); // Opera Fix $(" #nav li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); } $(document).ready(function(){ mainmenu(); });j'aurais voulu conserver le background image jusqu'a ce que le sous menu soit cliqué ou mousout ...
Autre chose en principe les rubriques du sous menu devraient avoir un background color #FFF et hover, hors ils héritent du hover des a parents
Je sens que je brule ...
Merci de vos lumières
Partager