By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,968 Members | 1,506 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,968 IT Pros & Developers. It's quick & easy.

Jquery horizontal menu work on click

100+
P: 347
I have a horizontal menu that uses the following jquery to work

Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function () {
  2. // <![CDATA[
  3.     var timeout    = 500;
  4.     var closetimer = 0;
  5.     var ddmenuitem = 0;
  6.  
  7.     function ddmenu_open(){
  8.         ddmenu_canceltimer();
  9.            ddmenu_close();
  10.            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
  11.            $('#biog').css('visibility', 'hidden');
  12.     }
  13.  
  14.     function ddmenu_close(){
  15.         if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
  16.         $('#biog').css('visibility', 'visible');
  17.     }
  18.  
  19.     function ddmenu_timer(){
  20.         closetimer = window.setTimeout(ddmenu_close, timeout);
  21.     }
  22.  
  23.     function ddmenu_canceltimer(){ 
  24.         if(closetimer){ 
  25.             window.clearTimeout(closetimer);
  26.                 closetimer = null;
  27.     }}
  28.  
  29.     $(document).ready(function(){ 
  30.         $('#ddmenu > li').bind('mouseover', ddmenu_open)
  31.         $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
  32.     });
  33.  
  34.     document.onclick = ddmenu_close;
  35. // ]]>  
  36. });
this works fine but i want to get the submenu to appear on click instead of on mouseover but still dissapear when the mouse goes out of the menu

i tried changing the

$('#ddmenu > li').bind('mouseover', ddmenu_open) line to

$('#ddmenu > li').bind('click', ddmenu_open)

$('#ddmenu > li').click(ddmenu_open)

and

$('#ddmenu > li').on('click', ddmenu_open)

but none of these worked

any ideas??
Mar 26 '13 #1
Share this Question
Share on Google+
1 Reply


100+
P: 347
Figured this out just removed the

document.onclick = ddmenu_close;

line at the end

Now i have a problem closing the menu i want to close on mouse out so my jquery now is

at the moment i have a different id for each submenu

Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function () {
  2. // <![CDATA[
  3.     var timeout    = 500;
  4.     var closetimer = 0;
  5.     var ddmenuitem = 0;
  6.  
  7.     function ddmenu_open(){
  8.         ddmenu_canceltimer();
  9.            ddmenu_close();
  10.            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
  11.            $('#biog').css('visibility', 'hidden');
  12.     }
  13.  
  14.     function ddmenu_close(){
  15.         if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
  16.         $('#biog').css('visibility', 'visible');
  17.     }
  18.  
  19.     function ddmenu_timer(){
  20.         closetimer = window.setTimeout(ddmenu_close, timeout);
  21.     }
  22.  
  23.     function ddmenu_canceltimer(){ 
  24.         if(closetimer){ 
  25.             window.clearTimeout(closetimer);
  26.                 closetimer = null;
  27.     }}
  28.  
  29.     $(document).ready(function(){ 
  30.         $('#ddmenu > li').bind('click', ddmenu_open);
  31.         $('#ulAgesid').bind('mouseout',  ddmenu_timer);
  32.         $('#ulUKAccentsid').bind('mouseout',  ddmenu_timer);
  33.         $('#ulStylesid').bind('mouseout',  ddmenu_timer);
  34.         $('#ulWorldAccentsid').bind('mouseout',  ddmenu_timer);
  35.         $('#ulForeignLanguagesid').bind('mouseout',  ddmenu_timer);
  36.     });
  37.  
  38.  
  39. // ]]>  
  40. });
problem i have is if you go onto the ages for the example i have coloured it red, if you stay in the red area all is fine but once you try and go over the button the menu closes

page can be seen here

http://www.yaketyyak.co.uk/newpages/...&voicetype=All
Mar 27 '13 #2

Post your reply

Sign in to post your reply or Sign up for a free account.