Solved

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

Posted on 2013-05-22
10
363 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
  • 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
 

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now