it-swarm.dev

メニュー項目の間に分割画像を配置する方法

Joomlaメニューモジュールを変更して、すべてのリストアイテムの間にディバイダーイメージを配置できるようにしています。問題は、これらがサブメニューに表示されないようにすることです。サブメニューにあるものとそうでないものをどのようにして除外できますか?

そのようにしたい場合は、メインメニューのみに表示され、その下にリストとして表示されるサブメニューには表示されない場合にエコーしてください。 「deeper」でフィルタリングすると、特定の1つのアイテムのみがフィルタリングされ、他のサブメニューアイテムの下に配置され続けるためです。

4
Hocho

より大きい記号>(即時の子セレクター)と:after疑似要素を使用して、純粋なCSSを使用してこれを実現できます。

デフォルトのJoomla 3とProtostarテンプレートに基づいた簡単な例を次に示します(Joomla 2.5を使用していることはわかっていますが、機能するはずです。機能しない場合は、HTML/CSSコードの一部を投稿してください)。

ul.menu > li { /* Add some space between menu items for image */
   padding-right: 10px; /* Change to your image width */
}
ul.menu > li:after { /* Target immediate children of <ul> with class "menu" */
   content: "";
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   width: 10px; /* Change to your image width */
   height: 40px; /* Change to your image height */
   background: url('path/to/image.jpg') no-repeat; /* Place your image URL here */
}
ul.menu > li:last-child:after { /* Remove the image for the last menu item*/
   display: none;
}
6
johanpw

現在のメニュー構造がどのようになっているか、それがデフォルトのJoomlaメニューであるか、拡張機能を使用しているかはわかりませんが、メニューに簡単に適用できる非常に基本的な例を紹介します。

したがって、メニューに次のHTMLマークアップがあるとします。

<ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>
        <span class="drop">Item 4</span>
        <ul class="submenu">
            <li>Item 4.1</li>
            <li>Item 4.2</li>
            <li>Item 4.3</li>
        </ul>
    </li>
</ul>

次のCSSを使用して、各メインメニュー項目にディバイダーを追加できます。

.menu li {
    border-left: 1px solid #000;
}
.menu li:first-child,
.menu li .submenu li {
    border-left: none;
}

これにより、最初の項目とサブメニュー項目とは別に、メニュー項目に左の境界線が追加されなくなります。

お役に立てれば

1
Lodder

コアを変更しようとしている場合mod_menu次に、 overridedefault.phpと画像を入れてください 102行目

0
Dmitry Rekun