CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JDavies
JDavies

Reputation: 2770

Keep UL visible when hovering from div to UL

I've got a custom header / nav where I have two elements that represent two sections of a website. I want to be able to hover over one of the elements and display a particular menu. However the Menu list isn't a child of the element. So I can't do it with CSS.

The problem i'm having is when I hover over the element, the menu shows. But I move my mouse to hover over the menu and and as soon as move away from the element the menu disappears. I have tried adding a display:block to the manu items, with a .delay() method running but there is still a slight flicker when moving the mouse away from the div.

Here is my current code:

//HTML

<header>

    <a class='hoverOverOne'>Hover over me to show menu</a>
    <a class='hoverOverTwo'>Hover over me to show menu</a>

    <nav>

<ul id='menuToShow-One'>
<li>testing</li>
<li>testing</li>

</ul>

<ul id='menuToShow-Two'>
    <li>testing</li>
    <li>testing</li>
</ul>

</nav>
</header>

// jQuery 

jQuery("a.hoverOverOne").hover(
      function () {
         jQuery('#menuToShow-One').slideDown('medium').delay(500);
      }, 
      function () {
         jQuery('#menuToShow-One').slideUp('medium').delay(500);
    });

    jQuery("a.country").hover(
      function () {
         jQuery('#menuToShow-Two').slideDown('medium').delay(500);
      }, 
      function () {
         jQuery('#menuToShow-Two').slideUp('medium').delay(500);
    });

// CSS

#menuToShow-One{
display:none;
}

#menuToShow-Two{
display:none;
}

Any help would be much appreciated.

Thanks.

Upvotes: 0

Views: 266

Answers (2)

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

$(function(){
	$("a.hoverOverOne, a.hoverOverTwo").hover(function () {
		var menu = '#menu'+this.id;
        $('.menu').not(menu).slideUp(0);
        $(menu).slideDown('medium');
    });
	$("ul.menu").mouseleave(function () {
		$(this).slideUp('medium');
    });
});
a.hoverOverOne{
  margin-right: 20px;
}
#menuToShow-One{
  display:none;
}
#menuToShow-Two{
  display:none;
}
nav{
  display:inline-block;
}
ul li{
  display:block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<header>
	<a class='hoverOverOne' id="ToShow-One">Hover over me to show menu 1</a>
	<a class='hoverOverTwo' id="ToShow-Two">Hover over me to show menu 2</a><br />
	<nav>
		<ul id='menuToShow-One' class="menu">
			<li>testing menu 1</li>
			<li>testing menu 1</li>
		</ul>
		<ul id='menuToShow-Two' class="menu">
			<li>testing menu 2</li>
			<li>testing menu 2</li>
		</ul>
	</nav>
</header>

Upvotes: 1

Josh Burgess
Josh Burgess

Reputation: 9567

Check the following solution. No need for JS to power this one.

#hover-one:hover ~ nav ul#menuToShow-One,
#hover-two:hover ~ nav ul#menuToShow-Two {
  max-height: 500px;
  transition: 0.2s;
}

#menuToShow-One,
#menuToShow-Two {
  max-height: 0;
  transition: 0.2s;
  transition-delay: 1s;
  overflow: hidden;
}

nav:hover #menuToShow-One,
nav:hover #menuToShow-Two {
  max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>

  <a id="hover-one" href='#hoverOverOne'>Hover over me to show menu</a>
  <a id="hover-two" href='#hoverOverTwo'>Hover over me to show menu</a>

  <nav>

    <ul id='menuToShow-One'>
      <li>testing 1</li>
      <li>testing 1</li>

    </ul>

    <ul id='menuToShow-Two'>
      <li>testing 2</li>
      <li>testing 2</li>
    </ul>

  </nav>
</header>

Upvotes: 0

Related Questions