5

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>
3
  • I tried it with #nav as class, but it doesn't seem to work. Can anyone help? Commented Mar 6, 2013 at 23:23
  • I'm running into the same issue where I can't get it working either. Works great on Amazon - but I feel like it has to do with not only the structure, but the style of the submenu. I had a huge negative left position on the submenu - which I think was messing with the math. Commented Mar 7, 2013 at 15:03
  • 1
    Perhaps this will help: I just added a working example to the menu-aim repository. Check out example/example.html at github.com/kamens/jQuery-menu-aim and lemme know how it goes.
    – kamens
    Commented Mar 9, 2013 at 20:40

3 Answers 3

8

This is simply demo code I put together because I wasn't able to get my markup to work when it was nested. I had to put subnav items in a different box.

http://codepen.io/mikevoermans/pen/EtKxp

HTML

<ul id="main_nav">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>


        <div id="flyouts">

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
            </ul>

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
                <li><a href="#">Sub Item 5</a></li>
                <li><a href="#">Sub Item 6</a></li>
                <li><a href="#">Sub Item 7</a></li>
                <li><a href="#">Sub Item 8</a></li>
            </ul>

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
                <li><a href="#">Sub Item 5</a></li>
                <li><a href="#">Sub Item 6</a></li>
                <li><a href="#">Sub Item 7</a></li>
            </ul>

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
            </ul>

            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
            </ul>

        </div>
        <!-- /#flyouts -->

JS

$("#main_nav").menuAim({
    activate: function(a){
        var idx = $(a).index();
        $('#flyouts ul').eq(idx).show();
    },  // fired on row activation
    deactivate: function(a){
        var idx = $(a).index();
        $('#flyouts ul').eq(idx).hide();

    }  // fired on row deactivation
});
3
  • Hi Mike, I like your use of show() and hide(). Could you edit your answer with the relevant parts showing the actually code ? See this meta SO post as to the why just a link is to be avoided: meta.stackexchange.com/questions/149890/…
    – AardVark71
    Commented Mar 8, 2013 at 13:23
  • @AardVark71 Added in code examples - thanks for the info that I should directly include code here. Just thought that might be challenging to understand without the exploratory context of a working demo. Commented Mar 11, 2013 at 15:27
  • Does it work for several menu item? For some reason it does not in case to use CLASS instead of ID in the two UL or DIV
    – Anthony
    Commented Feb 18, 2015 at 16:37
6

This is cleaner and more semantic than what mikevoermans posted (no offense).

You can keep your nesting and you don't have to make extra var's. Plus, targeting by index is bad because what if one of your items doesn't have a subnav.

You just have to specify everything accordingly. I got it working on a Natgeo site but I can't link to it because we haven't launched yet.

HTML:

<nav id="main-nav">
<ul>
    <li class="parentnav">
        <a>Parent</a>
        <ul class="subnav">
            <li><a href="" title="">child</a></li>
            <li><a href="" title="">child</a></li>
        </ul>
    </li>
    </li>
        <a>Parent</a>
    </li>
    <li class="parentnav">
        <a>Parent</a>
        <ul class="subnav">
            <li><a href="" title="">child</a></li>
            <li><a href="" title="">child</a></li>
        </ul>
    </li>
</ul></nav>

JS:

$("#main-nav").menuAim({
    rowSelector: "li.parentnav",
    submenuDirection: "below",
    tolerance: 0,
    activate: function(a){
        $(a).children('.subnav').show();
    },
    deactivate: function(a){
        $(a).children('.subnav').hide();
    }
});

// direction can be: left, right, above or below.

// the more tolerance = less tolerant..it's backwards and miss leading but that's it 0 means have a lot of tolerance, so less is more :/

1
  • Thumbs up for mentioning the "tolerance" option. As its actually not in the documentation on the github page i did not know about that setting. Makes things just so much more "tuneable".
    – Fabian S.
    Commented Dec 4, 2014 at 14:20
0

I don't know with what classes your css menu works currently, but to get this working you should just replace the empty jQuery function $.noop with one that works with your classes. Something along the following lines should work (using the nav class):

$(".nav").menuAim({
    activate: function(a){$(a).addClass("submenu-visible")},  
    deactivate: function(a){$(a).removeClass("submenu-visible")},  
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.