I just found: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown, and I want to implement it on my site, but frankly I don't know how.
I read the documentation, and it is as follows:
But I'm not sure what I should do.
Should this jQuery
code be on the index.html
page in a <script>
tag?
Additionally, I get that I should use it as this:
$("#menu").menuAim({
activate: $.noop, // fired on row activation
deactivate: $.noop, // fired on row deactivation
});
But how do I know what class I should use?
My menu-code is as follows:
<h3 class="demo-panel-title">Menu</h3>
<div class="row demo-row">
<div class="span9">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a href="#">
Menu Item
<span class="navbar-unread">1</span>
</a>
</li>
<li class="active">
<a href="#">
Messages
<span class="navbar-unread">1</span>
</a>
<ul>
<li><a href="#">Element One</a></li>
<li>
<a href="#">Sub menu</a>
<ul>
<li><a href="#">Element One</a></li>
<li><a href="#">Element Two</a></li>
<li><a href="#">Element Three</a></li>
</ul> <!-- /Sub menu -->
</li>
<li><a href="#">Element Three</a></li>
<li>
<a href="#">Sub menu</a>
<ul>
<li><a href="#">Element One</a></li>
<li><a href="#">Element Two</a></li>
<li><a href="#">Element Three</a></li>
<li><a href="#">Element One</a></li>
<li><a href="#">Element Two</a></li>
<li><a href="#">Element Three</a></li>
</ul> <!-- /Sub menu -->
</li>
</ul> <!-- /Sub menu -->
</li>
<li>
<a href="#">
About Us
<span class="navbar-unread">1</span>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>