0

I am building a mega menu and would like for it to be at lightweight as possible.

HTML:

<div id="menu-wrapper">
  <ul class="nav">
    <li><a href="#">Category A</a>
      <div class="block">
        <h3>Category A</h3>
        <div class="nav-column">
          <ul>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                  <li><a href="#">Link #5</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="home">
            <h3>Featured Products</h3>
            <div class="featured">
                <p>Lorum Ipsum...</p>
            </div>
        </div>
      </div>
    </li>
    <li><a href="#">Category B</a>
      <div class="block">
        <h3>Category B</h3>
        <div class="nav-column">
          <ul>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                  <li><a href="#">Link #5</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="home">
            <h3>Featured Products</h3>
            <div class="featured">
                <p>Lorum Ipsum...</p>
            </div>
        </div>
      </div>
    </li>
    <li><a href="#">Category C</a>
      <div class="block">
        <h3>Category C</h3>
        <div class="nav-column">
          <ul>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                  <li><a href="#">Link #5</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Sub-Category</a>
              <div class="sub-column">
                <ul>
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                  <li><a href="#">Link #4</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="home">
            <h3>Featured Products</h3>
            <div class="featured">
                <p>Lorum Ipsum...</p>
            </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Of course there are many more nested onordered lists, but that is your basic heirarchy.

What I'm trying to do is create a jQuery function that will perform a height check:

When you HOVER on a .nav > li > a, the jQuery checks the heights of ALL .sub-columns AND .home that fall under it, and ONLY THOSE, when you roll off, the height check resets, so you can check the next .nav > li > a.

I was recently pointed to THIS possible solution, but it was checking ALL of the .sub-columns and not just the .sub-columns that fall under the .nav > li > a I was hovering over.

I feel that I'm 90% of the way there, but I'm just not pointing or reference the correct parent-child-sibling elements to make it work properly.

Thanks in advance.

Community
  • 1
  • 1
Murphy1976
  • 1,415
  • 8
  • 40
  • 88

1 Answers1

0

If i understood right you want something like the following.

$(".nav > li > a").hover(function(){

    var subColumns = $(this).next().find(".sub-column");

});

The next() function gets the div block(nav-column) which contains all the sub-columns for that link. Then i did a find() since it's several elements nested under that. Here's a fiddle that alerts out the number of sub-columns it finds.

Matt
  • 335
  • 2
  • 4