dropdown menu compatible tablet
Bonjour,
je tente de créer un menu déroulant qui serait compatible sous tablette.
Pour le moment sur navigateur classique, à l'event hover, le sous menu se déroule bien en dessous verticalement.
J'ai donc voulu rajouter, à coté de chaque point de menu, une div avec une image. Et au clic sur cette div, ouvrir le sous menu. (Ceci en jQuery)
Ca ouvre bien le sous menu mais les sous menu s'ouvrent en dessous sur une même ligne. Le second problème est que le hover reste actif et donc ouvre une seconde fois le menu.
Par ailleurs lorsque je reclique sur la div pour fermer le sous menu, le display se met à 'none' et donc le hover ne fonctionne plus.
Voici mon menu
Code:
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
| <div style="width:100%;">
<ul id="nav">
<li id="dir"><a href="#">Eclairage LED</a><ul><li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=2');">Le LED</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=3');">GU10</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=4');">MR16</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=5');">E27</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=6');">E14</a></li></ul></li>
<div class="div_sub"><img src="../Commons/Pictures/nav-arrow-down.png" width="10px" height="10px" border="0"></div>
<li id="dir"><a href="#">Ventilation VMC</a>
<ul>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=8');">La VMC</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=9');">Simple flux</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=10');">Double flux</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=11');">Echangeur à plaque</a></li><li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=12');">Echangeur rotatif</a></li></ul></li>
<div class="div_sub"><img src="../Commons/Pictures/nav-arrow-down.png" width="10px" height="10px" border="0"></div>
<li id="dir"><a href="#">Sécurisation</a>
<ul><li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=14');">Contrôle d'accès</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=15');">Parlo/vidéo phone</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=16');">Portail</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=17');">Caméra IP</a></li></ul></li>
<div class="div_sub"><img src="../Commons/Pictures/nav-arrow-down.png" width="10px" height="10px" border="0"></div>
<li id="dir"><a href="#">Electrotechnique</a>
<ul><li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=19');">Domotique KNX</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=20');">Automatisation</a></li>
<li><a href="#" onclick="sendForm('Views/Article/viewArticle.php?articleId=21');">Eletricité générale</a></li></ul></li>
<div class="div_sub"><img src="../Commons/Pictures/vimeo.com/nav-arrow-down.png" width="10px" height="10px" border="0"></div></ul></div> |
voici mon css
Code:
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
| ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
/*menu parent*/
ul li {
display: block;
position: relative;
float: left;
background: #4D65AE;
color:white;
text-align: center;
margin:0px auto;
vertical-align:middle;
}
/*permet de ne pas afficher les puces*/
li ul {
display: none;
}
ul li a {
height: 30px;
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #4D65AE;
margin-left: 1px;
white-space: nowrap;
margin:0px auto;
vertical-align:middle;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #4D65AE; }
li:hover li a:hover {
background: #3b3b3b;
}
.div_sub {
background: #3b3b3b;
width: 15px;
height:30px;
float:left;
} |
et ici le jquery
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| $(document).ready(function () {
$('.div_sub').click(function() {
if(displayed){
$('.div_sub').prev().children("ul").fadeOut("slow");
displayed=false;
}else{
$(this).prev().children("ul").show();
displayed=true;
}
//e.preventDefault();
});
}); |
J'espère avoir été assez clair pour expliquer mon soucis.
Merci de votre aide
