5

I'm trying to make a Joomla menu module to behave like the menu from this site: http://wachtel.de/backoefen/etagenoefen.html.

What's important is that every menu level is displayed in single panel - one under another. It seems almost impossible to do in pure CSS when given the standard Joomla menu module code, which looks like this:

<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>

Is there an easy way to change the way the code is generated so it puts every menu level in separate block? Or maybe this behavior can be done in CSS without having to change the output code? I don't want to do this in JS until it's absolutely necessary.

5

I won't give you code on how to create a such menu, but I will give you an idea that will allow you to create a similar end result.

You can create a "Split-Menu", by using 2 menu modules. At the First Menu Module (main first-level module) you will set to show only up to level 1 menu-items, in the:

Module settings -> Start Level & End Level

At the second module, you will set to show level from 2 to 2.

Position the 2 modules at the same module position and then adjust their CSS. If you want to have different styling for the modules, add a custom css class to any of the modules, in the Advanced Settings Tab.

Menu Module - Menu Items Level Settings

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.