?
Solved

How to make my menu slide down on a hover?

Posted on 2011-05-10
19
Medium Priority
?
667 Views
Last Modified: 2012-05-11
Hi, when 'About Us' is hovered over in the nav menu I want a div to slide down below it:

      $("#about").hover(function() {
            $("#1").addClass("menuOn");
            $("#1").slideDown(slow);
      });

<a href="#about">About Us</a>

<div id="1">
<a href="#">About Us</a>
<a href="#">Our Design Team</a>
<a href="#">Why Choose Kitchen Master</a>
<a href="#">Privacy/Terms</a>
<a href="#">Contact Us</a>
</div>

but this is not working.  Any ideas?

http://gowiththemaster.com/tleithoff/index.php
0
Comment
Question by:FairyBusiness
  • 9
  • 8
  • 2
19 Comments
 
LVL 8

Expert Comment

by:askurat1
ID: 35732806
0
 

Author Comment

by:FairyBusiness
ID: 35732834
that link is not working for me. . .
0
 
LVL 8

Expert Comment

by:askurat1
ID: 35732847
What do you mean? It works fine.
0
Independent Software Vendors: 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!

 

Author Comment

by:FairyBusiness
ID: 35732877
Now its working, must have been my server.

I still wish I could figure out how to make my div slide down. . .
0
 

Author Comment

by:FairyBusiness
ID: 35732926
Well, in order for it to slide down its needs to be hidden.  Its not taking my class which has the display: hidden property.

$('#one,#two,#three,#four').addClass('menusOff');

i have done this before in other scripts. ..  can you see why this might not work?
0
 
LVL 8

Expert Comment

by:imantas
ID: 35732968
Here's your action.js fixed:
jQuery(document).ready(function(){
    $('#slideshow').fadeSlideShow();
	
$('#slideshow-div').rsfSlideshow();
$("span", "#intro").css({color: "#30a01f"});
$('#one,#two,#three,#four,#five').addClass('menusOff');
	
$("#about").hover(function() {
	$("#one").addClass("menuOn");
	$("#one").slideDown('slow');
});

});

Open in new window


You had extra letter "s" in addClass, slow needed quotes: "slow".

For this script to work, you need to add id="about" to your "About Us" link, so instead of
<a href="#about">About Us</a>

Open in new window

you should have
<a href="#about" id="about">About Us</a>

Open in new window

Furthermore, your "#one" needs to be initially hidden for slideDown to work, so apply this to your html:
<div id="one" style="display: none">

Open in new window


These fixes made slideDown to work.
0
 

Author Comment

by:FairyBusiness
ID: 35733015
Ok, i changed it.  This was suppose to make it hidden:

$('#one,#two,#three,#four').addClass('menusOff');

but its not working. . . can you tell me why?
0
 
LVL 8

Expert Comment

by:imantas
ID: 35733066
Because your menusOff style declaration states:
display: hidden

Open in new window

which is invalid, you should use
display: none

Open in new window


http://www.w3schools.com/css/pr_class_display.asp
0
 

Author Comment

by:FairyBusiness
ID: 35733100
ok, i had none at first but it wasnt working so i switched it.  I imagine it didnt work for other reasons before though. . .

ok so its kind of working now.  It shows when i hover over it but the z-index of the class it not working.  I made it 1000 so that it would appear about the slide show (and I gave #content a position of relative).

Also I tried to toggle it like this:

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

but no luck.  Any suggestions?
0
 
LVL 8

Expert Comment

by:imantas
ID: 35733123
If you want it to overlap the content without moving it down, use absolute position instead:
<div id="one" style="position: absolute; z-index: 1000">

Open in new window

0
 
LVL 8

Expert Comment

by:imantas
ID: 35733155
Also, position of your element must not be static (which is default) for z-index to work. You must at least declare it as relative.

Quote from w3.org:
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

http://www.w3schools.com/Css/pr_pos_z-index.asp
0
 

Author Comment

by:FairyBusiness
ID: 35733164
ok, finally how can I toggle the menu?


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

that didnt work though
0
 
LVL 8

Expert Comment

by:imantas
ID: 35733230
What do you mean by saying "toggle"? You want it to hide when mouse is out?
0
 

Author Comment

by:FairyBusiness
ID: 35733237
yep.  I thought toggle always just did the opposite though
0
 
LVL 8

Expert Comment

by:imantas
ID: 35744205
Yes, but here's the tricky part, because you have to monitor two elements and hide it when mouse is on neither of them. I suggest you to make a global variable and store a timer which is initiated when mouse leaves "About Us" and stop that timer if mouse comes back on either "About Us" or the sub-menu.
0
 

Author Comment

by:FairyBusiness
ID: 35754140
Ok, I have a timer that another guy on here gave me for this:

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(){});


it works but it does not slide back up unless I hover over the drop down menu.  How do I get it to slide up if the mouse is not hovering over #about or #one?
0
 
LVL 8

Expert Comment

by:imantas
ID: 35756577
You should use something like:
var globalTimer = {};

function setTimer(menu) {
  if (typeof globalTimer[menu] == 'undefined' || globalTimer[menu] === null) {
    globalTimer = setTimeout(function() { $(menu).slideUp("slow", 300); }, 300);
  }
}

function clearTimer(menu) {
  if (typeof globalTimer[menu] != 'undefined' && globalTimer[menu] !== null) {
    clearTimeout(globalTimer);
    globalTimer = null;
  }
}

$("#about").hover(function() {
  $("#one").addClass("menuOn");
  $("#one").slideDown("slow");
  clearTimer("#one");
},function(){
  setTimer("#one");
});

$("#one").hover(function() {
  clearTimer("#one");
}, function(){
  setTimer("#one");
});

Open in new window


I'm not sure if this works, because I didn't have environment to test it. Functions setTimer and clearTimer are made to accept multiple menu IDs. I hope you will at least get the idea.
0
 
LVL 8

Accepted Solution

by:
imantas earned 2000 total points
ID: 35756590
Sorry, I forgot to add "[menu]" next to globalTimer:
var globalTimer = {};

function setTimer(menu) {
  if (typeof globalTimer[menu] == 'undefined' || globalTimer[menu] === null) {
    globalTimer[menu] = setTimeout(function() { $(menu).slideUp("slow", 300); }, 300);
  }
}

function clearTimer(menu) {
  if (typeof globalTimer[menu] != 'undefined' && globalTimer[menu] !== null) {
    clearTimeout(globalTimer[menu]);
    globalTimer[menu] = null;
  }
}

$("#about").hover(function() {
  $("#one").addClass("menuOn");
  $("#one").slideDown("slow");
  clearTimer("#one");
},function(){
  setTimer("#one");
});

$("#one").hover(function() {
  clearTimer("#one");
}, function(){
  setTimer("#one");
});

Open in new window

0
 

Author Closing Comment

by:FairyBusiness
ID: 35878839
Thanks
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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

839 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