Question

Can we Split Sub Menu from the parent main menu item and display it in another location in the layout. My markup is generated dynamically by my application hence have no manual control.

My Markup is generated like this:

<div class="wrapper" style="margin:0 auto; width:900px;">
    <div class="nav">
        <ul class="menu">
            <li class="item"><a href="#">Item 1</a></li>
            <li class="item"> <a href="#">Item 2</a>
                <ul class="sub-menu">
                    <li class="sub-item"><a href="#">Sub Item 1</a></li>
                    <li class="sub-item"><a href="#">Sub Item 2</a></li>
                    <li class="sub-item"><a href="#">Sub Item 3</a></li>
                </ul>
            </li>
            <li class="item"><a href="#">Item 3</a></li>
        </ul>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit imperdiet convallis. Aliquam erat volutpat. Vestibulum consectetur tellus a est aliquam imperdiet. Aliquam sed dolor ut nulla porta pellentesque. Vivamus et tortor at tortor interdum pretium. Donec vel ante tellus, id iaculis elit. Duis nec eros quis nulla vestibulum sagittis. Nam a auctor ipsum. Curabitur nulla elit, volutpat eu porta a, mollis sed tellus. Integer eleifend nulla non nibh tristique euismod. </p>
    </div>
    <div class="sidebar">
        <div class="split-menu">
        </div>
    </div>
</div>

The task:

If I click on Item 2, then the <ul class="sub-menu"> of item 2 must get displayed in <div class="split-menu"> and similarly when I click on Item 3 then the item 3 submenu must get displayed there?

My Questions :

1. Can we do this using php?
2. If not how to do this?

UPDATE:

My target is to show this on JavaScript disabled old IE6 browsers because the target visitors of my client are from china and in china still a lot of IE6s are floating around which do not understand :hover css.

Lastly I am using WordPress and Magento as the base applications.

Answer 1

I noticed you said that you were trying to achieve this in WordPress.
If so,

Navigation in WordPress.

header.php

wp_list_pages('depth=-1&title_li=');

This will remove the dropdown (set the depth parameter to -1)

page.php

wp_list_pages("title_li=&child_of=$id&show_date=modified"); 

This will display child menu items for the current page. (set child_of parameter to current page)
Place this wherever you want to in your layout.

In Magento:

in: app/design/frontend/default/default/template/catalog/navigation/top.phtml
Replace

<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>

With this:

<?php foreach ($this->getStoreCategories() as $_category): ?>
<a href="<?php echo $this->getCategoryUrl($_category); ?>"><?php echo $this->htmlEscape($_category->getName()); ?></a>
<?php endforeach ?>

Still working on sub-categories in Magento (bit of a noob in Magento)

Edit: I thought it would be quicker to loop it up rather than figure it out 🙂
Try this, Here