web-dev-qa-db-fra.com

Module de menu Joomla - niveaux d'affichage dans des panneaux séparés

J'essaie de faire un module de menu Joomla se comporter comme le menu de ce site: http://wachtel.de/backoefen/etagenoefen.html .

L'important est que chaque niveau de menu soit affiché dans un seul panneau - un sous l'autre. Il semble presque impossible de le faire en CSS pur avec le code de module de menu Joomla standard, qui ressemble à ceci:

<ul class="nav menu">
<li class="item-108"><a href="#">1-level-1</a></li>
<li class="item-124"><a href="#">1-level-2</a></li>
<li class="item-125 active deeper parent"><a href="#">1-level-3</a>
    <ul class="nav-child unstyled small">
        <li class="item-164"><a href="#">2-level-1</a></li>
        <li class="item-165"><a href="#">2-level-2</a></li>
        <li class="item-166 current active deeper parent">
            <a href="#">2-level-3</a>
            <ul class="nav-child unstyled small">
                <li class="item-212"><a href="#">3-level-1</a></li>
                <li class="item-213"><a href="#">3-level-2</a></li>
            </ul>
        </li>
        <li class="item-210"><a href="#">2-level-3</a></li>
        <li class="item-211"><a href="#">2-level-4</a></li>
    </ul>
</li>
<li class="item-126"><a href="#">1-level-4</a></li>
</ul>

Existe-t-il un moyen simple de changer la façon dont le code est généré pour placer chaque niveau de menu dans un bloc séparé? Ou peut-être que ce comportement peut être fait en CSS sans avoir à changer le code de sortie? Je ne veux pas faire ça dans JS avant que ce soit absolument nécessaire.

menutemplate-overridecssmodule-displaymenu-parameters
5
zorza

Je ne vous expliquerai pas comment créer un tel menu, mais je vous donnerai une idée qui vous permettra de créer un résultat final similaire.

Vous pouvez créer un "Split-Men" en utilisant 2 modules de menu. Dans le premier module de menu (module principal de premier niveau), vous pourrez afficher uniquement les éléments de menu de niveau 1, dans les options suivantes:

Paramètres du module -> Niveau de début & Niveau de fin

Au deuxième module, vous définissez le niveau d'affichage de 2 à 2.

Positionnez les 2 modules à la même position, puis ajustez leur CSS. Si vous souhaitez appliquer un style différent aux modules, ajoutez une classe CSS personnalisée à l’un des modules, dans l’onglet Paramètres avancés .

Menu Module - Menu Items Level Settings

5
FFrewin