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 :
- Can we do this using php?
- 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.