Hi I'm using grails navigation plugin and when it generates menus it put the sub navigation underneath the main menu, but i'm making my menu a vertical menu so i don't want the sub menu under the whole menu i want it under the active element.
Example: this is how it generate the menu and sub menu
<ul class="mainmenu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul class="submenu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
What i want is:
<ul class="mainmenu">
<li>item1
<ul class="submenu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
<li>item2</li>
<li>item3</li>
</ul>
Since i don't know of a way to make grails nav plugin do this i guess i'll have to make jquery do it after it's ge开发者_运维问答nerated. Any ideas?
Edit
So the jquery i used from the answer below is:
<script type="text/javascript">
$(function() {
alert("hi");
$(".subnavigation").appendTo($(".navigation li:navigation_active"));
});
</script>
....
<ul class="navigation" id="navigation_tabs">
<li class="navigation_first">Item 1</li>
<li class="navigation_active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="navigation_last">Item 5</li>
</ul>
<ul class="subnavigation" id="subnavigation_tabs">
<li class="subnavigation_first">Sub 1</li>
<li>Sub 2</li>
<li class="subnavigation_last">Sub 3</li>
</ul>
This seems like it should work but the menu still looks the same with all the sub items down below.
You can do this:
$(".submenu").appendTo($(".mainmenu li:first"));
Alternatively:
$(".mainmenu li:first").append($(".submenu"));
Or, to put it under all of them (hide by CSS):
$(".mainmenu li").append($(".submenu"));
Edit, for the updated question:
$(".subnavigation").appendTo($(".navigation li.navigation_active"));
Assuming with active you mean mouse hovering.
$("ul.mainmenu li").hover(function() {
$(this).append($("ul.submenu"))
})
精彩评论