How to put divider images between menu items

Question

I'm trying to modify the Joomla menu module, so that I can put divider images between every list item. The thing is, that I don't want these to appear in the sub-menu's. How can I filter out what is in a sub menu and what is not?

Say I want it to be like, echo it if it's in the main menu only, not in the sub menu's that appear as a list underneath it. Because when I filter it on "deeper", it only filters it on 1 specific item, and then keeps placing it underneath the other submenu items.

Answer 1

You can achieve this using pure CSS using the greater than symbol > (immediate children selector) and the :after pseudo-element.

Here's a quick example based on the default Joomla 3 and the Protostar template (I know you're using Joomla 2.5, but it should work. If not, please post some of your HTML/CSS code.)

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

Answer 2

I don't know how your current menu structure is, whether it's the default Joomla menu, or whether you're using an extension, however I will give you a very basic example which you should find easy to apply to your menu.

So lets say you have the following HTML markup for your 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>

You could use the following CSS to add your divider to each main menu item

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

This will remove the add a left border to the menu item, apart from the first item and the submenu items.

Hope this helps

Answer 3

If you are trying to modify core mod_menu then you should override default.php and put your image on line 102.