jQuery-menu-aim
jQuery-menu-aim copied to clipboard
Published
20 hours ago •
kamens
kamens
jQuery-menu-aim with Jquery Vertical UI tabs
Hi,
I am trying to implement jQuery-menu-aim with Jquery Vertical UI tabs but unable to do so.
Can someone please help me out with this? Thanks in advance!
<!-- 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>
Here is the Plunker link - https://embed.plnkr.co/q52PZEMnCiSO8ZKsUXJM/ Please help!