it-swarm.com.de

So platzieren Sie Trennbilder zwischen Menüelementen

Ich versuche, das Joomla-Menümodul so zu ändern, dass ich Trennbilder zwischen die einzelnen Listenelemente einfügen kann. Die Sache ist, dass ich nicht möchte, dass diese in den Untermenüs erscheinen. Wie kann ich herausfiltern, was sich in einem Untermenü befindet und was nicht?

Sagen wir, ich möchte, dass es so aussieht, als würde es wiedergegeben, wenn es sich nur im Hauptmenü befindet, nicht in den Untermenüs, die als Liste darunter angezeigt werden. Denn wenn ich es nach "tiefer" filtere, filtert es es nur nach einem bestimmten Element und platziert es dann unter den anderen Untermenüelementen.

4
Hocho

Sie können dies mit reinem CSS erreichen, indem Sie das größer als Symbol > (Direktauswahl für Kinder) und das :after Pseudoelement verwenden.

Hier ist ein kurzes Beispiel, das auf dem Standard-Joomla 3 und der Protostar-Vorlage basiert.

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

Ich weiß nicht, wie Ihre aktuelle Menüstruktur aussieht, ob es sich um das Standard-Joomla-Menü handelt oder ob Sie eine Erweiterung verwenden. Ich werde Ihnen jedoch ein sehr einfaches Beispiel geben, das Sie leicht auf Ihr Menü anwenden können sollten.

Nehmen wir also an, Sie haben das folgende HTML-Markup für Ihr Menü:

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

Sie können das folgende CSS verwenden, um Ihren Teiler zu jedem Hauptmenüelement hinzuzufügen

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

Dadurch wird das Hinzufügen eines linken Randes zum Menüelement entfernt, abgesehen vom ersten Element und den Untermenüelementen.

Hoffe das hilft

1
Lodder

Wenn Sie versuchen, den Kern mod_menu Zu ändern, sollten Sie überschreibendefault.php Und Ihr Bild in Zeile 102 einfügen.

0
Dmitry Rekun