During the work on admin area I came to the conclusion that desired layout of the main menu is very similar to navbar configuration of superfish, that is used in CDropDownMenu extension.
Using this class (navbar) when you choose one of sub-menu items after loading it’s link whole submenu stays visible (I don’t have rights to paste links yet, so please find screenshot in dd_superfish.jpg attached)
However I also wanted to load those controllers using AJAX approach below on the page. Searching on that gave me AjaxMenu extension.
Both extensions (CDropDownMenu and AjaxMenu) extend CMenu. After looking through its code I found out that overloaded methods are different (CDropDownMenu overloads run and renderDropDownMenu, while AjaxMenu overloads isItemActive and renderMenuItem). So I’ve tried to join these extensions and put AjaxMenu.php into CDropDownMenu.php. As a result I got controllers loaded as I want - using AJAX in below <div> element ( I also changed in controllers render() to renderPartial()), but menu itself stopped working as I wanted - after cursor is moved away from it sub-menu disappears.
Here cursor is on "Products" menu item - see ajax_menu_hover.jpg attached.
Now cursor is away - see ajax_menu.jpg.
I understand that it is somehow related to the fact that both extensions use jQuery, however I have no understanding of how to debug this behavior to achieve the result needed (to have sub-menu visible after loading it’s link through ajax) - I don’t have any serious experience with jQuery.
Will be grateful for any advices on how to resolve this exact problem and what are the general guidelines of debugging dynamic behaviors!
Thanks to everyone in advance!