web-dev-qa-db-fra.com

Comment mettre des images de séparation entre les éléments de menu

J'essaie de modifier le module de menu Joomla afin de pouvoir insérer des images de séparation entre chaque élément de la liste. Le fait est que je ne veux pas que ceux-ci apparaissent dans les sous-menus. Comment puis-je filtrer ce qui est dans un sous-menu et ce qui ne l'est pas?

Dites que je veux que ce soit comme, faites-le écho si c'est dans le menu principal seulement, pas dans les sous-menus qui apparaissent comme une liste en dessous. Parce que lorsque je le filtre sur "plus profond", il le filtre uniquement sur un élément spécifique, puis continue à le placer sous les autres éléments de sous-menu.

joomla-2.5modulemenu
4
Hocho

Vous pouvez y parvenir en utilisant du CSS pur en utilisant le symbole supérieur à symbole > (sélecteur immédiat d'enfants) et le :after pseudo-élément.

Voici un exemple rapide basé sur le modèle par défaut Joomla 3 et le modèle Protostar (je sais que vous utilisez Joomla 2.5, mais cela devrait fonctionner. Dans le cas contraire, postez une partie de votre code 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

Je ne sais pas quelle est la structure actuelle de votre menu, qu’il s’agisse du menu par défaut de Joomla ou de votre extension, mais je vais vous donner un exemple très simple que vous devriez trouver facile à appliquer à votre menu.

Disons que vous avez le balisage HTML suivant pour votre menu:

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

Vous pouvez utiliser le CSS suivant pour ajouter votre diviseur à chaque élément du menu principal.

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

Cela supprimera l'ajout d'une bordure gauche à l'élément de menu, à l'exception du premier élément et des éléments de sous-menu.

J'espère que cela t'aides

1
Lodder

Si vous essayez de modifier core mod_menu alors vous devriez remplacerdefault.php et mettez votre image sur la ligne 102 .

0
Dmitry Rekun