Wrap sub menu items in div

Question

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

Answer 1

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.