web-dev-qa-db-ja.com

Joomlaメニューモジュール-レベルを個別のパネルに表示

Joomlaメニューモジュールがこのサイトのメニューのように動作するようにしようとしています http://wachtel.de/backoefen/etagenoefen.html 。

重要なのは、すべてのメニューレベルが1つのパネルに表示されることです。次のような標準のJoomlaメニューモジュールコードを指定すると、純粋なCSSで実行することはほとんど不可能に見えます。

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

コードの生成方法を変更して、すべてのメニューレベルを個別のブロックに配置する簡単な方法はありますか？または、出力コードを変更せずに、CSSでこの動作を実行できますか？絶対に必要になるまで、JSでこれを実行したくありません。

menutemplate-overridecssmodule-displaymenu-parameters
5
zorza

そのようなメニューを作成する方法のコードは提供しませんが、同様の最終結果を作成できるようにするアイデアを提供します。

2つのメニューモジュールを使用して、「Split-Men」を作成できます。最初のメニューモジュール（メインの第1レベルモジュール）では、レベル1までのメニュー項目のみを表示するように設定します。

モジュール設定->開始レベル＆終了レベル

2番目のモジュールでは、レベルを2から2に表示するように設定します。

2つのモジュールを同じモジュール位置に配置してから、CSSを調整します。モジュールに異なるスタイルを設定する場合は、[詳細設定]タブで、モジュールのいずれかにカスタムCSSクラスを追加します。

Menu Module - Menu Items Level Settings

5
FFrewin