Magento – Wrap sub menu items in div

cssnavigation

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

Best Answer

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.

Related Solutions

Magento – Vertically Position Main Navigation on Home Page

I would suggest using unsetChild and insert rather than remove and then having to create the block again. Oddly unsetChild takes the block alias set via as but insert takes the block name.

<default>
    <reference name="header">
        <action method="unsetChild"><name>topMenu</name></action>
    </reference>
    <reference name="content">
        <action method="insert"><name>top.menu</name></action>
    </reference>
</default>

Using insert also gives you some more power as regards to positioning of the block etc as you can pass some more parameters.

public function insert($block, $siblingName = '', $after = false, $alias = '')

NOTE: the main functions you can use via layout xml can be found in Mage_Core_Block_Abstract

Magento – Varien_Data_Tree_Node – Position nav menu items

Marius to the rescue! Its not an elegant solution but seems to be the only approach. Since its a matter of getting the existing tree items, temporarily storing the data, removing them and then readding the existing items with the newly inserted one before.

Taken from: https://magento.stackexchange.com/a/7361/69

public function addItemsToTopmenuItems($observer){
    //get the menu object -Type Varien_Data_Tree_Node
    $menu = $observer->getMenu();
    //get the tree object in the menu -type Varien_Data_Tree
    $tree = $menu->getTree();
    //get current page handler
    $action = Mage::app()->getFrontController()->getAction()->getFullActionName();
    $brandNodeId = 'category-node-brand';
    //set the node id, label and url
    $data = array(
        'name' => Mage::helper('catalog')->__('Brands'),
        'id' => $brandNodeId,
        'url' => Mage::getUrl('brands'),
        'is_active' => ($action == 'brands')
    );
    //create a node object
    $brandNode = new Varien_Data_Tree_Node($data, 'id', $tree, $menu);
    //temporary array with nodes
    $menuItems = array();
    //my first menu item
    $menuItems[] = $brandNode;
    //loop through existing menu items, add them to the array and remove them from the    menu
    foreach ($menu->getChildren() as $child){
        //add the item to the temp array
        $menuItems[] = $child;
        //remove item from the menu
        $menu->removeChild($child);
        //I need to add a new menu item after the category with id 6
        //don't worry the id is not hard coded. it comes from a config setting
        //I just added 6 here to make it easier to read
        if ($child->getId() == 'category-node-6'){
            //create a new node as $brandNode called $newNode
            ...
            //add the node to my temp array
            $menuItems[] = $newNode;
        }
    }
    //add other nodes at the end of my temp array
    ...
    //recreate the menu in the order I need
    foreach ($menuItems as $child){
        $menu->addChild($child);
    }
}

Also it may be worth mentioning that Varien_Data_Tree_Node_Collection implements ArrayAccess.