Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Modification on top menu
 
rodrigo423
Member
 
Total Posts:  32
Joined:  2009-03-18
 

What I am trying to do is to change the background image of top menu by category. I use modern theme and there is no menu bar by default.

I opened menu.css and added #nav li.item-1、#nav li.item-2, #nav li.item-3,etc… however all categories on top menu display 0 levels’ images.  I am actually confused.  There is no live site and can’t show you the source code. I will appreciate if you have any good suggestion.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Periculi
Sr. Member
 
Total Posts:  249
Joined:  2009-02-03
 

Here’s the code from the default template:

<div class="header-nav-container">
    <
div class="header-nav">
        <
h4 class="no-display"><?php echo $this->__('Category Navigation:'?></h4>
        <
ul id="nav">
        
<?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php 
echo $this->drawItem($_category?>
        <?php 
endforeach ?>
        
</ul>
    </
div>
    
<?php echo $this->getChildHtml('topLeftLinks'?>
</div>
The modern template uses a similar process to prepare the category links, because drawItem() is a core function for the catalog navigation and it is what generates the html.
And here is an example html output:
<div class="header-nav">
        <
h4 class="no-display">Category Navigation:</h4>

        <
ul id="nav">
                    <
li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level0 nav-test">
<
a href="http://127.0.0.1/magento/index.php/test.html"><span>Test</span></a>
</
li>

                    <
li class="level0 nav-test2">
<
a href="http://127.0.0.1/magento/index.php/test2.html"><span>Test 2</span></a>
</
li>
                    <
li class="level0 nav-test3">
<
a href="http://127.0.0.1/magento/index.php/test3.html"><span>Test 3</span></a>
</
li>
                </
ul>
    </
div>

As you can see, the category links are built in a foreach loop which treats them all the same.

However, there is a CSS value available in there.  Each category gets it’s name applied to the class as nav-{name}.  Which you could use to add unique CSS effects to the navigation bar items.  In the above example, I have 3 buttons, which I can style with classes: nav-test, nav-test2, and nav-test3.

This has it’s drawbacks, the primary one being you must know what the category is called and add it to the CSS.  So you can’t just define it in the admin panel for a new category on-the-fly.  But, you don’t need to jump into altering how $this->drawItem($_category) is working to get the desired effect.

 
Magento Community Magento Community
Magento Community
Magento Community
 
rodrigo423
Member
 
Total Posts:  32
Joined:  2009-03-18
 

Thank you, Sir!  It works! I wish you have a wonderful day. (^ _ ^)

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top