Discussion :

[bender86]

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 html :

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
<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 css :

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
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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[rodolphebrd]

Bonjour,

avez-vous un lien vers votre page?

[rodolphebrd]

Je ne constate pas tous les problèmes que vous mentionnez :
• le sous-menu est vertical
• les image (flèches) ne sont pas cliquables.

Je commencerais votre menu plutôt comme celui-ci:
http://codepen.io/anon/pen/pcluB

[bender86]

Voici un lien vers le site ou vous pourrez voir le menu:
www.vds-conception.be/new

Pour info je suis sous safari sur mac :-p mais bon faudrait que ce soit multi navigateur, tablet incluses.

Merci de votre aide

[rodolphebrd]

Effectivement il y a un problème...

Essayez de revoir votre menu en vous inspirant de ce lien : http://speckyboy.com/2013/01/30/more...ion-solutions/

Sachant que de placer des flèches indépendamment des items alourdit votre dispositif et les deux effets se court-circuitent mutuellement.

[bender86]

Comment eviter les fleches si les menu parents doivent aussi pointer sur un lien?

Merci de votre aide

[rodolphebrd]

Je verrais les flèches incluses en background et non cliquables.