Gestion de sous-menu menu ul li

**cccb24** · 05/09/2014, 12h41

Bonjour à tous,

je rencontre un problème avec mon menu ul li.

Dans la section photographes, j'aimerais que les noms restent fixes lorsqu'on les survol afin de faciliter la navigation.
C'est un problème de sous-menu que je n'arrive pas à résoudre.

A voir ici

Si quelqu'un a la solution,

Merci !

**cedsun** · 05/09/2014, 19h56

il faudrait qu'on puisse voir ton code

**s0h3ck** · 06/09/2014, 04h14

Envoyé par cedsun

il faudrait qu'on puisse voir ton code

En fait, il y a un lien si on regarde attentivement. Après, il suffit d'avoir un bon outil pour extraire le code « problématique ». Je suis d'accord avec toi qu'il aurait été gentil de fournir le code HTML et le code CSS.

Donc, selon ce que j'ai extrait et compris de la problématique de cccb24,

Voici le 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
<div class="bloc_1">
        <div id="bloc_1_pt1">
            <h1>Photographers</h1>
                <ul>
                    <li><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/bertrandcavalier.html" target="_blank">bertrandcavalier.html</a>">Bertrand Cavalier</a>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/seasonal.html" target="_blank">seasonal.html</a>">- Seasonal</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/grey_area.html" target="_blank">grey_area.html</a>">- Greay Area</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/marrakchi.html" target="_blank">marrakchi.html</a>">- Marrakchi</a></ul>
                    </li>
                    <li><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/luciedufour.html" target="_blank">luciedufour.html</a>">Lucie Dufour</a>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/arene.html" target="_blank">arene.html</a>">- Arène</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/islande.html" target="_blank">islande.html</a>">- Islande</a></ul>
                    </li>
                    <li><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/maudfaivre.html" target="_blank">maudfaivre.html</a>">Maud Faivre</a>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/nummer_een.html" target="_blank">nummer_een.html</a>">- Nummer Één</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/transjurassienne.html" target="_blank">transjurassienne.html</a>">- Transjurassienne</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/architecture.html" target="_blank">architecture.html</a>">- Architecture</a></ul>
                    </li>
                    <li><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/saragonzalez.html" target="_blank">saragonzalez.html</a>">Sara Gonzalez </a>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/refuge.html" target="_blank">refuge.html</a>">- Refuge</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/ecos_y_polvo.html" target="_blank">ecos_y_polvo.html</a>">- Ecos y polvo</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/detras_mi_ojos.html" target="_blank">detras_mi_ojos.html</a>">- Detras mi ojos</a></ul>
                    </li>
                    <li><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/massaomascaro.html" target="_blank">massaomascaro.html</a>">Massao Mascaro</a>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/ramo.html" target="_blank">ramo.html</a>">- Ramo</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/bascule.html" target="_blank">bascule.html</a>">- Bascule</a></ul>
                    </li>
                    <li><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/gillesribero.html" target="_blank">gillesribero.html</a>">Gilles Ribero</a>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/les_veilles.html" target="_blank">les_veilles.html</a>">- Les Veilles</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/les_dunes.html" target="_blank">les_dunes.html</a>">- Les Dunes</a></ul>
                        <ul><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/gravitations.html" target="_blank">gravitations.html</a>">- Gravitation</a></ul>
                    </li>
                </ul>
        </div>
 
        <div id="bloc_1_pt2">
            <h2><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/shop.html" target="_blank">shop.html</a>">Shop</a></h2>
            <h2><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/informations.html" target="_blank">informations.html</a>">Informations</a></h2>
            <h2><a href="<a href="http://www.developpez.net/forums/view-source:http://lagrotte.be/new/newsletter.html" target="_blank">newsletter.html</a>">Newsletter</a></h2>
        </div>        
    </div>

Et le code 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/* BALISES TYPE */
 
ul{
    position: fixed;
    list-style: none;
    padding: 0;
    font-size: 0.98em;
    letter-spacing: 0.04em;
    padding: 0 0 0 0px;
    border-radius: 0px;
    box-shadow: 0;
}
 
ul li{
    padding-bottom: 5px;
}
 
 
ul li ul{
    margin-left: 50px;
}
 
li:hover ul{
    display: block;
    opacity: 1;
    transition: all 0.75s ease 0s;
    margin-left: 130px;
    position: relative;
}
 
li ul {
    opacity: 0;
    transition: all 0.5s ease 0s;
}
 
a{
    text-decoration: none;
    color: #000;
}
 
a:hover{
    border-bottom: 1px dotted;
}
 
p{
    font-size: 1.0em;
}
 
/* H1 H2 H3 ... */
 
h1, h2{
    font-family: helvetica neue, helvetica, arial, sans-serif;
    font-size: 1.3em;
    font-style: normal;
    font-weight: bold;
    line-height: 1.3em;
    margin: 0;
    border-bottom: 2px solid;
}
 
h2{
    border: 0px;
}
 
h3{
    font-size: 0.98em;
    font-weight: normal;
    line-height: 1.3em;
    text-decoration: underline;
}
 
/* CONTENT */
 
body{
    font-family: courier, courier new;
    font-size: 11px;
    line-height: 1.3em;
    margin-left: 40px;
    margin-right: 20px;
    margin-top: 30px;
}
 
/* BLOCS */
 
.bloc_1{
    position: fixed;
    width: 250px;
}
 
#bloc_1_pt2{
    margin-top: 180px;
}

Enfin, le JS Bin (edit).

Un bémol, je ne suis pas certain de comprendre ce que tu entends par les "noms restent fixes".

Bonne continuité,
s0h3ck.

**cccb24** · 06/09/2014, 10h53

Envoyé par cedsun

il faudrait qu'on puisse voir ton code

En effet, mon lien était un peu caché, je pensais que c'était plus pratique d'utiliser un tool comme Firebug. Bref, je ferais plus attention la prochaine fois.

Merci s0h3ck pour les informations complémentaire.

Un bémol, je ne suis pas certain de comprendre ce que tu entends par les "noms restent fixes".

En fait, lorsque l'on survol les nom, il y a un padding-bottom qui s'ajoute à cause du sous menu.
J'ai essayé de l'enlever en définissant une width, margin etc au mais rien n'y fait.

Code :

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

li ul {}

Je souhaiterais que lorsque l'on survol les noms, il n'y ait pas ce padding-bottom qui se rajoute à cause des sous menu.

J'espère être un peu plus précis.

Merci

**NoSmoking** · 06/09/2014, 15h28

Bonjour,
et si tu commençais par écrire du code valide

Code html :

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

1
2
3
4
5
6
7
8
<!-- code invalide -->
<ul>
    <li><a href="bertrandcavalier.html">Bertrand Cavalier</a>
    <ul><a href="seasonal.html">- Seasonal</a></ul>
    <ul><a href="grey_area.html">- Greay Area</a></ul>
    <ul><a href="marrakchi.html">- Marrakchi</a></ul>
    </li>
</ul>

logiquement on pourrait s'attendre à avoir

Code html :

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

1
2
3
4
5
6
7
8
9
<ul>
    <li><a href="bertrandcavalier.html">Bertrand Cavalier</a>
        <ul>
            <li><a href="seasonal.html">- Seasonal</a></li>
            <li><a href="grey_area.html">- Greay Area</a></li>
            <li><a href="marrakchi.html">- Marrakchi</a></li>
        </ul>
    </li>
</ul>

à partir de là il est plus facile de cibler via le CSS.

Pour la suite il te faut mettre sur le LI une position:relative afin qu'ils servent de référent aux UL enfants, soit dans ton CSS

Code :

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

1
2
3
4
ul li{
    padding-bottom: 5px;
    position:relative; /* A AJOUTER */
}

maintenant il te faut passer les UL des LI en position:absolute, soit dans ton CSS

Code :

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

1
2
3
4
5
6
7
li ul {
    position:absolute;  /* A AJOUTER */
    top:0;              /* Placement sur la même ligne */
    white-space:nowrap; /* Evite le passage à la ligne éventuel */
    opacity: 0;
    transition: all 0.5s ease 0s;
}

il te faut également supprimer le position:relative sur le hover des LI.

...cela devrait déjà avoir une autre allure.

Personnellement je jouerais plutôt sur la position left pour l'effet, de 0 à 100%, cela te permet d'être sûr qu'au final le positionnement sera le bon.

Au final le CSS des parties modifiées

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
ul li{
    padding-bottom: 5px;
    position:relative; /* A AJOUTER */
}
ul li ul{
/*	margin-left: 50px;/* OUT */
	left:0;
  display: block;
  z-index:0;
}
li ul {
    position:absolute;  /* A AJOUTER */
    top:0;              /* Placement sur la même ligne */
    white-space:nowrap; /* Evite le passage à la ligne éventuel */
    opacity: 0;
    transition: all 0.5s ease 0s;
}
li:hover ul{
    opacity: 1;
/*    transition: all 0.75s ease 0s;/* !!! */
/*    margin-left: 130px;/* OUT */
    left:100%;
/*    position: relative;/* A SUPPRIMER */
    z-index:10;/* Pour être suûr qu'il soit au dessus */
}

.. en gros ce n'est jamais qu'un menu simple vertical

**cccb24** · 07/09/2014, 12h25

Un grand merci,

je t'avoues que je ne m'attendais pas à des explications aussi claires !

Problème résolu et j'ai pu bricoler comme il faut le code pour que ça ressemble à ce que j'attends.

Thanks !

Gestion de sous-menu menu ul li

CSS

Discussions similaires

Partager

Partager