Discussion :

[Mano34]

Bonjour,

De niveau très débutant en CSS et HTML, j'ai réussi tant bien que mal à intégrer un menu déroulant (au passage merci au site developpez.com) dans la parti sidebar de mon site. Il fonctionne sur tout les navigateurs sur PC mais pas sur les Ipads et smatphones.

Comment pourrais-je faire pour résoudre ce problème ?

Ci-joint mon code CSS:

Code :

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

1
2
3
4
5
6
7
8
<style type="text/css">
/*<![CDATA[*/
 
ul ul {display: none; position: absolute; left: 144px; top: -1px; margin:1px; padding: 0px; border: 2px solid pink; border-radius: 10px 10px 10px 10px;}
   li {list-style-type: none; position: relative; width: 170px; background-color: #E0E0E0; padding: 1px; margin: 2px;}
   li:hover, li.sfhover {background-color: #FFFF70;}
   li:hover ul.niveau2, li li:hover ul.niveau3, li.sfhover ul.niveau2, li li.sfhover ul.niveau3 {display: block;}
   li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid grey;border-radius: 10px 10px 10px 10px;}

Et mon code HTML :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<ul class="niveau1">
    <li class="plus">
        <center>
            <font color="#FF07B6"><b>NOUVEAUTES</b></font>
        </center>
 
        <ul class="niveau2">
            <li>
                <p>
                    <a href="http://idecado.jimdo.com/accessoires-higth-tech/"><b>ACCESSOIRES HIGH TECH</b></a>
                </p>
            </li>
 
            <li>
                <p>
                    <a href="http://idecado.jimdo.com/bijouterie/"><b>BIJOUTERIE</b></a>
                </p>
            </li>
 
            <li>
                <p>
                    <a href="http://idecado.jimdo.com/bracelet-hologrammes/"><b>BRACELET HOLOGRAMMES</b></a>
                </p>
            </li>
 
            <li>
                <p>
                    <a href="http://idecado.jimdo.com/santé-et-bien-être/"><b>SANTE ET BIEN ÊTRE</b></a>
                </p>
            </li>
 
            <li>
                <p>
                    <a href="http://idecado.jimdo.com/prêt-à-porter-sexy/"><b>PRÊT A PORTER SEXY</b></a>
                </p>
            </li>
 
            <li>
                <p>
                    <a href="http://idecado.jimdo.com/adulte/avertissement/"><b>ADULTE</b></a>
                </p>
            </li>
        </ul>
    </li>
</ul>
 
<ul class="niveau2">
</ul>

Si quelqu'un peu m'aider ?
Merci d'avance !

[rodolphebrd]

Bonjour,

les menus drop-down sont gérés autrement sur mobiles et tablettes.

Il n'y a pas de survol donc il faut créer un comportement au clic (touch).

Voici un lien avec son exemple:

http://tympanus.net/codrops/2013/04/...ti-level-menu/
http://tympanus.net/Development/Resp...ultiLevelMenu/

Note:
Votre code Html mérite d'être revu:
- supprimer les balises Center et Font (tout cela est stylisable en css)
- des P dans des Li () : inutile

[Mano34]

Merci de votre réponse, mais concrètement que dois-je changer exactement sur mon code ?
J'ai regardé vos liens et essayer d'adapter le code, mais sans résultat.