2

I would like the wrap my second and third level categories in my main menu in a div tag so i can make a mega menu using the div to position the links.

Is this possible. Heres an example of what i mean:

<ul>
<li>
    <a href="#">1st level</a>
    <ul class="sub-menu-list">
        <div class = "column1">
            <li><a href="#">2nd level</a>
            <ul>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
            </li>
        </div>
        <div class = "column2">
            <li><a href="#">2nd level</a>
            <ul>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
            </li>
        </div>
    </ul>
</li>
<li><a href="#">1st level</a></li>
<li><a href="#">1st level</a></li>
<li><a href="#">1st level</a></li>
<li><a href="#">1st level</a></li>
 </ul>

Something along those lines is what im looking to do. Any help would be great, thanks

2

Create rewrite module:

MyNamespace - could be your company name or project name.

MymoduleName - for example could be ExtendMenu.

Defining the module

In app/etc/modules create module initialization file MyNamespace_MymoduleName.xml:

<?xml version="1.0"?>
<config>
    <modules>
        <MyNamespace_MymoduleName>
            <active>true</active>
            <codePool>local</codePool>
        </MyNamespace_MymoduleName>
    </modules>
</config>

Creating the module subfolders

Create the following folder-structure within the app/code/local directory:

  • MyNamespace
  • MyNamespace/MymoduleName
  • MyNamespace/MymoduleName/etc

The XML configuration

Create a configuration-file MyNamespace/MymoduleName/etc/config.xml which contains XML-code:

<?xml version="1.0"?>
<config>
    <modules>
        <MyNamespace_MymoduleName>
            <version>0.0.1</version>
        </MyNamespace_MymoduleName>
    </modules>
    <frontend>
        <layout>
            <updates>
                <mynamespace_mymodulename>
                    <file>mynamespace/mymodulename.xml</file>
                </mynamespace_mymodulename>
            </updates>
        </layout>
    </frontend>
</config>

The XML layout

In app/design/frontend/base/default/layout/ create folder mynamespace and file mymodulename.xml in it.

The config.xml now points towards an mymodulename.xml file, which is located app/design/frontend/base/default/layout/mynamespace.

Now add some content to mymodulename.xml file:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="catalog.topnav">
            <action method="setTemplate">
                <template>mynamespace/mymodulename/page/html/topmenu.phtml</template>
            </ac‌​tion>
        </reference>
    </default>
</layout>

Rewriting template

In app\design\frontend\base\default\template folder create \mynamespace\mymodulename\page\html\topmenu.phtml. Copy html code from app\design\frontend\base\default\template\page\html\topmenu.phtml and set 'your_css_wrapper_class' as second param for function getHtml.

<?php $_menu = $this->getHtml('level-top', 'your_css_wrapper_class') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
       <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>

Clear all cache.

See your menu html code. Second level elements should be wrapped in:

<div class="your_css_wrapper_class"></div>

Hope this will help you.

  • Thanks for the answer. What should I be putting in my own class and where should I place it in the directory of my magento site? Thanks again – Tom Burman Jan 25 '14 at 13:23
  • Instead of 'your_css_wrapper_class' you can put 'column'. The best way is to create your own module, with layout xml. In layout xml write <default> <reference name="catalog.topnav"> <action method="setTemplate"><template>yourmodule/page/html/topmenu.phtml</template></action> </reference></default>. – oleksii.svarychevskyi Jan 25 '14 at 13:40
  • Also this article can be heplfull – oleksii.svarychevskyi Jan 25 '14 at 13:44
  • Hi oleksii, i have been looking into what you said and still cant figure out how to do what you said above, im not very experienced with magento blocks etc, so if you can give me a more "dummies" instruction on how to do this, would be great? thanks – Tom Burman Jan 26 '14 at 18:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.