How to make $childrenWrapClass true [duplicate]

Question

im trying to get a div to wrap the second level nav items in my navigation and have found out about the $childrenWrapClass attribute of renderCategoryMenuItemHtml call in the top.phtml file

What is the correct way of setting this to true so my children nav gets wrapped in the div?

thanks

EDIT I have implemented the answer below but seem to have an error in this part of the process:

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

I have an error on the action tags saying "tag has wrong closing name" any ideas?

Also i have a 3 tier menu, will this wrap ONLY the 2nd tier or both the second and third? If it wraps both is there any way i can add a unique identifier to the class? say like a 1 for the 2nd tier and a 2 on the third tier?

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.