Discussion :

[Osef_]

Bonjour/bonsoir amis développeurs,

Je souhaite faire un menu vertical avec des sous menu qui apparaissent au clic sur une seule colonne. Un menu exactement comme ça en fait.
Cependant, j'ai deux problèmes. Tout d'abord, le sous-menu ne décale pas le
reste du menu qui suit. Les deux se superposent. J'ai tenté des display:block, inline-block, des z-index à tout va, sans aucun changement...

Ensuite lorsque je souhaite masquer le sous menu avec display:none pour mettre un display:block, le sous menu reste masqué.

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
 
          <ul id="menu">
           <li><a href="#accueil">Accueil</a></li>
           <li><a href="#profil">Qui suis-je ?</a></li>
           <li class="portfolio">
                <a href="#portfolio">Portfolio</a>
                <ul class="ss-menu">
                  <li><a href="">Logos</a></li>
                  <li><a href="">Cartes de visite</a></li>
                  <li><a href="">Flyers</a></li>
                  <li><a href="">Affiches</a></li>
                  <li><a href="">Autres</a></li>
                </ul>
           </li>
           <li><a href="#contact">Contactez-moi</a></li>
         </ul>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
ul#menu{font-family:'OSP-DIN'; font-size:2em; font-weight:normal; list-style:none; text-align:center; text-transform:uppercase; margin-left:-40px;}
 
#menu li{width:250px; height:30px; text-align:center; padding-bottom:5px; display:inline-block; position:relative; z-index:1;}
#menu>li:hover{background-color:#00CCFF; width:250px; height:30px;}
#menu a{text-decoration:none; color:white; height:30px; z-index:1;}
 
li.portfolio{}
li.portfolio:active + ul.ss-menu{display:block;}
 
#menu ul.ss-menu{display:inline-block; list-style:none; margin:0; padding:0;}
#menu ul.ss-menu li{font-size:0.7em; height:15px; width:250px; position:relative; z-index:1;}
#menu ul.ss-menu a:hover{color:#5FDCF9;}
#menu ul.ss-menu a{z-index:1;}

Quelqu'un aurait il solution à mes problèmes ?

[NoSmoking]

Bonjour,
lorsque tu définies une hauteur à une LI celle ci s'applique ...

On notera plusieurs maladresses, margin-left:-40px;, position:relative; inutile... par exemple.

Le plus simple est de revenir au départ, à savoir le minimum pour que cela fonctionne soit le CSS basique pour la gestion du survol suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#menu a{
  text-decoration:none;
  color:#FFF;
  display:block; /* prend la largeur du conteneur */
}
#menu a:hover{
  background-color:#00CCFF;
}
#menu li ul{
  display:none; /* pour l'effet survol */
}
#menu li:hover ul{
  display:block;
}

ensuite il ne s'agit que de cosmétique par exemple

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
/* cosmétique */
#menu{
  font-family:'OSP-DIN';
  font-size:2em;
  font-weight:normal;
  list-style:none;
  display:block;
  width:10em;
  margin: 0 auto;
  padding:0;
  text-align:center;
  text-transform:uppercase;
  background-color:#666;
}
#menu ul{
  list-style:none;
  margin:0;
  padding:0;
}
#menu ul.ss-menu li{
  font-size:0.7em;
  line-height:1.5em;
}

si tu utilises comme unité le em, autant l'utiliser pour la définition des largeurs et hauteurs également...

Je te laisse jeter un oeil

[Osef_]

Merci pour ton aide ! C'est effectivement la définition des hauteurs qui posait problème, même si je ne vois pas trop la logique ici ...

Sinon je comptais mettre un peu de transitions css dans l'apparition du ss menu, mais display ne semble pas être une propriété "animable" ? Même si je rajoute de l'opacité par dessus, ça fait bugger l'animation de l'opacité..

PS: Merci de tes remarques pour les px et position:relative ! Des trucs que j'oublie de rectifier des fois.

[spacy59]

si tu atribut une valeur a un li qui n'as pa de class ou d'id cela s'applique a tout

Pour mettre des transition tu ne pourra pas avec le display

il va te faloir utiliser opacité et height 0 pour pouvoir le faire

En gros la ou tu as mi ton display none;

tu met opacity:0 et height 0

Sur le hover ou tu a mi display block tu met opacity 1 et height:auto


si tu ne precise pas height 0 ton sous menu sera bien transparent mais apparaitra lorsque la souris passera sur la partie invisible

[NoSmoking]

Sinon je comptais mettre un peu de transitions css dans l'apparition du ss menu, mais display ne semble pas être une propriété "animable" ? Même si je rajoute de l'opacité par dessus, ça fait bugger l'animation de l'opacité..

une transition s'applique sur des valeur graduellement modifiable alors que display est ON/OFF.

Sur le hover ou tu a mi display block tu met opacity 1 et height:auto

auto n'est pas une valeur, il faut une valeur numérique.

Il convient donc effectivement de jouer sur la hauteur des UL avec d'autre propriété possible, opacité hauteur de LI etc, les transitions pouvant être combinées.

pour un avant goût:
les transitions CSS3 par l'exemple

[Invité]

Et pour l'ouverture "souple" de div, on trouve en jQuery : slideUp() et slideDown()

[NoSmoking]

Et pour l'ouverture "souple" de div, on trouve en jQuery : slideUp() et slideDown()

si on utilise jQuery que pour cela autant mettre une petite transition en CSS3 le résultat peut être pas mal également

Bon d'accord coté compatibilité cela ne va pas forcément le faire...