悬停主导航链接时，在侧面菜单中显示链接

Question

I want to show links in the side menu, depending on what link is hovered in the top nav, and display them until another link is hovered. Here's what I have:

HTML:

<ul class="nav navbar-nav">
  <li class="nav"><a class="toggle" href="#">LINK 1</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 2</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 3</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 4</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 5</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 6</a></li>
</ul>

<div class="sideMenu">
    <div id="sideMenuLinks">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
     </div>
</div>

jQuery:

$(document).ready(function() {
    $('.toggle').hover(function () {
        $('#sideMenuLinks').show('slow');
    });
});

This works to just display on hover but obviously only for sideMenuLinks , I have more links in different ID's, so if I hovered on "LINK 2" those links would be replaced and so on. Make sense?

Thanks!

Answer 1

I would add a data-* attribute to the main navigation links like so:

<ul class="nav navbar-nav">
  <li class="nav"><a class="toggle" data-menu="first" href="#">LINK 1</a></li>
  <li class="nav"><a class="toggle" data-menu="second" href="#">LINK 2</a></li>
  <li class="nav"><a class="toggle" data-menu="third" href="#">LINK 3</a></li>
</ul>

<div class="sideMenu">
    <div id="sideMenuLinks">
        <ul id="first" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
        <ul id="second" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
        <ul id="third" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
     </div>
</div>

Then you could get the data-menu value when hovering:

$(".toggle").hover(function() {
    $(".menuContent").each(function() {
        $(this).hide();
    });
    var menu = $(this).attr("data-menu");
    $('#' + menu).show('slow');
});

Haven't tested this, but this could eventualy make the menus a little bit more dynamic.

Answer 2

If i comprehend correctly, you have several ID's, that you only want te have shown, when a corresponding link is hovered somewhere else on the page.

So, what you could make is a bit more of what you got going. Imagine you got this HTML:

<ul class="nav navbar-nav">
    <li class="nav"><a class="toggle1" href="#">LINK 1</a></li>
    <li class="nav"><a class="toggle2" href="#">LINK 2</a></li>
    <li class="nav"><a class="toggle3" href="#">LINK 3</a></li>
</ul>

<div class="sideMenu">
    <div id="sideMenuLinks1">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
    </div>
<div id="sideMenuLinks2">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
    </div>
<div id="sideMenuLinks3">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
    </div>
</div>

Now you can use a simple for loop and the jQuery you already got, to get it going. jQuery:

$(document).ready(function() {
    for(i=0,i<3,i++){
        classname = '.toggle'+i;
        id = '#sideMenuLinks'+i;
        $(classname).hover(function () {
             $(id).show('slow');
        });
    }
});

I have not tested this, but its a simple, comprehensive solution. Hope this helped you! .