Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 206
  • Last Modified:

How to get my menu to stay active?

Hi, I created a drop down menu for my first link 'About Us'  but when I hover over the menu it still toggles it. I am trying to get it to stay open if one hovers over it:

$("#about").hover(function() {
      $("#one").addClass("menuOn");
      $("#one").slideToggle("slow");
      $("#one").hover(function() {
            $("#one").addClass("menuOn");
      });
});

This doesnt work though.  Any ideas?

http://gowiththemaster.com/tleithoff/index.php
0
FairyBusiness
Asked:
FairyBusiness
  • 6
  • 4
2 Solutions
 
hieloCommented:
$("#about").hover(function() {
      $("#one").addClass("menuOn");
      $("#one").slideToggle("slow");
      $("#one").hover(function() {
            $("#one").addClass("menuOn");
      });
},function(){});
0
 
FairyBusinessAuthor Commented:
Hey that works!  But why does putting the function outside work?? I would never think to do that. . .
0
 
FairyBusinessAuthor Commented:
Also,  I am trying to make the menu toggle or disappear when a one leaves the div but thats not working:

$("#about").hover(function() {
      $("#one").addClass("menuOn");
      $("#one").slideToggle("slow");
      $("#one").hover(function() {
            $("#one").addClass("menuOn");
      });
      $("#one").mouseOut(function() {
            $("#one").addClass("menusOff");
      });
},function(){});


What am i missing?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
amitkathpal123Commented:
change this line:
<div id="one" class="menusOff menuOn" style="display: none;" >

to

<div id="one" class="menusOff menuOn" onmouseout="$("#one").hide();" style="display: none;" onmouseover="$("#one").show();">
0
 
FairyBusinessAuthor Commented:
I tried this but no luck

$("#about").hover(function() {
      $("#one").addClass("menuOn");
      $("#one").slideToggle("slow");
      $("#one").onmouseover(function() {
            $("#one").addClass("menuOn");
      });
      $("#one").onmouseout(function() {
            $("#one").hide();
      });
},function(){});


(I am trying to keep all of my javascript in an external js file)
0
 
hieloCommented:
>>Hey that works!  
Of course. Why would I want to lead you astray?

>>But why does putting the function outside work??
your original function is doing toggling. But it does it when You enter AND when you leave.

>>I would never think to do that. . .
Like many others, you probably just "browsed" over the manual instead of "reading" it.  The hover() can be invoked:
.hover(InAndOutFunction);//which is what YOU had

.hover(InFunction, OutFunction);//this is what I gave you. NO toggling is done upon mouse out.

You need to realize that when the mouse moves from About Us to the  submenu, it is LEAVING the AboutUs and the mouseout is triggered.
0
 
FairyBusinessAuthor Commented:
Ok, I brought back the hover.  I was just trying stuff with that other guy example.

$("#about").hover(function() {
      $("#one").addClass("menuOn");
      $("#one").slideToggle("slow");
      $("#one").hover(function() {
            $("#one").addClass("menuOn");
      });
      $("#one").onmouseout(function() {
            $("#one").hide();
      });
},function(){});


I don't know what to put instead of mouseout.  Is there away to toggle the hover?? (not for #about for #one)
0
 
hieloCommented:

// Turns on a menu and toggles it
var s=0;
$("#about").hover(function() {
	s=0;
	$("#one").addClass("menuOn");

	$("#one").slideDown("slow");

	$("#one").hover(function() {

		

	}, function(){
			s=1;
			
			setTimeout(function(){if(s)$("#one").slideUp("slow");},300);
		}
	);

},function(){});

Open in new window

0
 
FairyBusinessAuthor Commented:
hmmmm well I am going to have multiple menus (#two, #three, #four) so thats not really what I'm looking for. Is there just simply a way to toggle the hover?  I like the slideUp idea
0
 
hieloCommented:
>>so thats not really what I'm looking for
Fair enough, but that does answer what you actually asked!

>>hmmmm well I am going to have multiple menus (#two, #three, #four)
In your markup, I don't see any "logic" that associates "label" to its submenus.

Have you considered using something that is already made - ex:
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

More options at:
http://www.dynamicdrive.com/dynamicindex1/index.html
0
 
FairyBusinessAuthor Commented:
Ok, I'll trying and figure something out beyond this!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now