Forum : Sous-Menu dépliable récalcitrant en CSS3

Bonjour tout le monde,

Je viens vous voir en dernier recour en espérant que quelqu'un aura une illumination en voyant le sujet.

Pour faire clair, j'ai réalisé un menu tout simple en CSS3 avec un sous menu.

La syntaxe simplifiée est la suivante :

<ul>
    <li></li>
    <li></li>
    <li>
       <ul>
          <li></li>
          <li></li>
       </ul>
    </li>
    <li></li>
    <li></li>
</ul>

Mon problème est que lorsque je survole l'item qui comporte le sous-menu, mes sous-items s'affichent mais ne "repoussent" pas les items du menu principal suivants. Le sous-menu s'affiche donc au dessus du menu principal (si je lui attribu un z-index supérieur).

Pour que vous comprenez mieux la situation, je vous ai fais un copié/collé du code sur CodePen : http://codepen.io/anon/pen/raWQdW .

Ce qui m'agace le plus dans tout ça c'est que ça fonctionnait lorsque je l'ai codé il y a quelques heures de cela et d'un coup d'un seul, ça n'a plus fonctionné... impossible de comprendre pourquoi.

Désolé si le code CSS est très fourni mais j'utilise un pré-processeur donc c'est moins lourd à écrire qu'il n'y parait :P

Je suis prêt à écouter et tester toutes vos pistes :)
Bonne nuit pour les couche-tard et bonne journée pour les autres,
Cdt.

MrG.

Anthoo

Réponse acceptée

J'ai fait ça en 5 minutes pour illustrer le principe de base : http://jsfiddle.net/zhghnkjx/. Il y a d'autres façons de faire, mais c'est l'idée, tu fais ce que tu veux avec ça après.

En tapant un peu dans ton code : http://codepen.io/anthonydugois/pen/QwGJzb. Je ne sais pas si c'est ce que tu voulais. Il y a des choses à améliorer mais ça fonctionne.

Pour l'explication qui va bien, ça venait du fait que tu avais fixé la taille de tes items à 50px, ce qui ne laissait pas de place au sous-menu.

MrGabin

Auteur

Aaargh c'est encore plus humiliant quand la réponse est simple x) Et d'autant plus qu'en y réfléchissant, j'ai dû rajouter cette hauteur que plus tard.. d'où le fait que ça fonctionnait avant :')

Merci beaucoup pour ton aide Anthoo, si je n'étais pas en Norvège je t'aurai bien payé un coup à boirre :D
Bonne journée ;)

P.S: Merci également pour le nowrap que ne je ne connaissais pas :)
J'ai également clarifié le code en utilisant les sélecteurs d'enfants (>).

Tu parlais de choses à améliorer, de quoi parlais-tu ? ça m'intéresse :)

Anthoo

Comme ça, sans trop entrer dans les détails, il faut éviter ce genre de choses :

.sidebar ul li {
    /* ... */
}

Tu perds le contrôle sur les listes imbriquées, et ça t'oblige à faire des surcharges qui compliquent beaucoup ton code. Donc deux solutions :

Soit tu utilises le sélecteur enfant direct >
Soit tu nommes tous tes éléments HTML par des classes

Personnellement je suis un grand partisan de la deuxième solution, car la première implique des sélections très complexes qui, en regard de la priorité, sont des calamités. Par exemple, si je veux mettre un fond rouge à une liste imbriquée en particulier, selon le principe de priorité, je serai obligé d'utiliser un sélecteur ayant autant ou plus de poids. Exemple :

.sidebar > ul > li > ul {
    background: red;
}
/* Je veux maintenant surcharger pour un style en particulier */
.sidebar2 > ul > li > ul { /* .sidebar2 a également la classe .sidebar ; je suis obligé de donner le même type de sélecteur pour surcharger le style */
    background: blue;
}

Alors qu'en donnant des classes à tous les éléments HTML :

<nav class="sidebar">
    <!-- liste niveau 1 -->
    <ul class="sidebar-list">
        <li class="sidebar-item">
        </li>
        <li class="sidebar-item">
            <!-- liste niveau 2 -->
            <ul class="sidebar-sublist">
                <li class="sidebar-subitem">
                </li>
                <li class="sidebar-subitem">
                </li>
            </ul>
        </li>
        <li class="sidebar-item">
        </li>
    </ul>
</nav>

Je peux donner les styles tranquillement sans complexifier mon code :

.sidebar-list {
    background: red;
}
.sidebar-sublist {
    background: blue;
}

Je t'invite à chercher du côté de BEM par exemple, qui est une méthode de travail en CSS qui permet d'organiser son code très simplement et de garder le contrôle. Comme disait l'autre, CSS c'est facile à apprendre, mais très compliqué à organiser.

PS : si tu repasses en France, y a pas de soucis pour une bonne bière. ;)

MrGabin

Auteur

Ouep je connais le concept de BEM :) Je code avec des classes pour chacun de mes éléments et sous éléments normalement. Je devrais peut être appliquer ça un peu mieux sur mes sidebars en effet.

C'est à dire qu'avec le préprocesseur je m'y retrouve facilement aussi. C'est sur qu'une fois généré, le code est pas extra à maintenir. C'est moins clair.

J'ai de toute façon indiqué les liaisons de parenté avec des > pour bien cibler mes contenus.

Encore merci pour ton aide :)

Sous-Menu dépliable récalcitrant en CSS3

4 réponses