Solved

Using jQuery/Javascript to open and close a graphical drop-down menu

Posted on 2013-05-22
10
378 Views
Last Modified: 2013-05-22
This is my test page:
http://partnersdesign.net/test

Script to open and close the menu '#contact':

$('#contactbtn').mouseover(function(){
	if (!$('#contact').is(':visible')){
		$('#contact').slideDown(500);
	}
});

$('#contactbtn').mouseout(function(){
	if ($('#contact').is(':visible')){
		$('#contact').slideUp(500);
	}
});

Open in new window


Here is the markup of the upper-right navigation area:

<h1>PARTNERS DESIGN<span class="smallhead">, INC.</span>&nbsp;&nbsp;/&nbsp;&nbsp;<a id="contactbtn">MAKE CONTACT</a><div id="contact">
	610.488.7611
	<div class="blackline"></div>
	<a id="contacthover1" href="mailto:info@partnersdesign.net">EMAIL</a>
	<div class="blackline"></div>
	<a id="contacthover2" href="https://www.facebook.com/pages/Partners-Design-Inc/62221992069?fref=ts" target="_blank">FACEBOOK</a>
</div></h1>

Open in new window


The only problem is that the menu doesn't stay open when you move the mouse down over the menu itself. I tried some rather complicated checks against both '#contactbtn' and '#contact', but then had issues because a mouseover on one of the <a> links within '#contact' was counting as a mouseout of '#contact'. I was also running into browser inconsistencies in that same regard, and I think my code was overly complex.

There must be some relatively simple way to do an if/then such as:

If 'mouseout' on both '#contactbtn' and '#contact' (plus its child elements) = slideUp menu?

Would appreciate any advice. Thank you!
0
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 6

Expert Comment

by:mickey159
ID: 39188232
Try this:

$('#contact').mouseout(function(){
	if ($('#contact').is(':visible')){
		$('#contact').slideUp(500);
	}
});

Open in new window


Feel free to ask if you have any further questions.
0
 

Author Comment

by:bbdesign
ID: 39188337
That is along the lines of what I want to do, and I installed it here:
http://partnersdesign.net/test

However, if you mouseover EMAIL or FACEBOOK, it closes the menu. This is one of the problems I was having before.

Thanks!
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39188375
Just for reference try this:

$(document).ready(function() {
$("#contactbtn").mouseover(function () {
   $('#contact').show().slideDown('slow');
});
 
$("#contactbtn").mouseout(function () {
   $('#contact').hide().slideUp(2000);
});
 });    

Open in new window

0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

Author Comment

by:bbdesign
ID: 39188406
That doesn't appear to do anything except get rid of the "slide" effect.
0
 
LVL 6

Accepted Solution

by:
mickey159 earned 500 total points
ID: 39188415
Try replace my previous comment with this:

$('#contact').on("mouseleave",function(){
	if ($('#contact').is(':visible')){
		$('#contact').slideUp(500);
	}
});

Open in new window

0
 
LVL 6

Expert Comment

by:mickey159
ID: 39188426
If you want reasons, this is it: (from jQuery Docs)

mouseout fires when the pointer moves out of the child element as well, while mouseleave fires only when the pointer moves out of the bound element.
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39188467
Oh ok see this :

<script>
$(document).ready(function() {
$("#contactbtn").mouseover(function () {
   $('#contact').show().slideDown('slow');
});
 $("#contact").mouseup(function(){
	$('#contact').css('display','block');
})

$("#contactbtn").mouseout(function () {
   $('#contact').hide().slideUp(2000);
});
});
</script>

Open in new window


And Your HTML I have changed a id to div please change it:
<h1>PARTNERS DESIGN<span class="smallhead">, INC.</span>&nbsp;&nbsp;/&nbsp;&nbsp;<br>
<div id="contactbtn">MAKE CONTACT
<div id="contact" style="display:none">
	610.488.7611
	<div class="blackline"></div>
	<a id="contacthover1" href="mailto:info@partnersdesign.net">EMAIL</a>
	<div class="blackline"></div>
	<a id="contacthover2" href="https://www.facebook.com/pages/Partners-Design-Inc/62221992069?fref=ts" target="_blank">FACEBOOK</a>
</div></h1>
</div>

Open in new window

0
 

Author Comment

by:bbdesign
ID: 39188478
Ah, "mouseleave"... I was not even aware of that trigger. That helps a lot. There is one final issue: if you mouseover the MAKE CONTACT and then mouseout of that, the menu does not go away. Because you have not done a "mouseleave" on the menu because you were never over it in the first place.

Is there a more elegant way to do that, rather than have a whole separate "mouseout" function on MAKE CONTACT?

Thanks!
0
 
LVL 6

Expert Comment

by:mickey159
ID: 39188612
Sorry for that but I need to sleep now. :-(  (I am in GMT+08:00)
I will answer that tomorrow. :-)
0
 

Author Comment

by:bbdesign
ID: 39188885
I think I have solved this, using your "mouseleave" idea. I wish I had known that was an option. I encapsulated #contact within #contactbtn (changed the <a> to a <span>) and put the "mouseleave" on #contactbtn instead of #contact... now it reacts as it should. Thanks for your help!
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question