Jquery Aim(menu hover fix) for Jquery vertical ui tabs
I am trying to implement Jquery ui tabs with Jquery menu aim feature but it is not working, however it works well with bootstrap. Have any one tried to implement this feature on JQuery vertical ui tabs? pls help my code is as follows.
<!-- My code --> <!doctype html> <html> <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery.menu-aim.js"></script> <script src="js/menu-hover-fixes.js"></script> <script> $(function() { $( "#tab_example" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" ); $( "#tab_example li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" ); $( "#tab_example" ).tabs({ event: "mouseover" }); }); </script> <style> #tab_example{width: 1000px; margin: 0 auto;} .ui-tabs-vertical { width: 55em;background:#DAE9C5; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li {background:#DAE9C5; clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block;width:100%; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; background:#4F6828;color:#FFFFFF;} .ui-tabs-vertical .ui-tabs-panel { padding: 0.9em; float: left; width: 40em;background:#DAE9C5} </style> </head> <body> <div id="tab_example"> <ul id="navBar"> <li data-submenu-id="t1"><a href="#t1">Tab 1</a></li> <li data-submenu-id="t2"><a href="#t2">Tab 2</a></li> <li data-submenu-id="t3"><a href="#t3">Tab 3</a></li> <li data-submenu-id="t4"><a href="#t4">Tab 4</a></li> </ul> <div id="t1" class="popover"> <p>This is Tab 1 content</p> </div> <div id="t2" class="popover"> <p>This is Tab 2 content</p> </div> <div id="t3" class="popover"> <p>This is Tab 3 content</p> </div> <div id="t4" class="popover"> <p>This is Tab 4 content</p> </div> </div> </body> </html>
Requesting a help on this!