473,320 Members | 1,922 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How to build a JQuery menu using a list element?

347 100+
I am trying to build a JQuery menu using a list element.

I can get the elements to appear when my mouse hovers over the top button but they dissapear before i can get to the sub menu buttons

JQuery is as follows

Expand|Select|Wrap|Line Numbers
  1.       $(document).ready(function(){
  2.  
  3.         // Hide all unordered lists that are descended from the navigation
  4.                 $("#artistnav ul").hide();
  5.     });
  6.  
  7.     $(window).load(function(){
  8.         $('#artistnav a').bind('mouseover', function(){
  9.  
  10.       // on clicking the link get the parent li then find the first ul you can and display
  11.  
  12.       $(this).parents("li:first").find("ul:first").toggle();
  13.       //return false;
  14.  
  15. });
  16.     });
the html code is as follows

Expand|Select|Wrap|Line Numbers
  1. <div id="artistcats">
  2. <ul id="artistnav">
  3. <li><a href="boys2.asp?id=368&voicetype=All"><img src="http://bytes.com/submit/images/voicetypes/tabs/mainpage_up.png" alt="Main Page" class="thumb" id="mainpage" onMouseOver="MM_swapImage('mainpage','','../images/voicetypes/tabs/mainpage_dn.png',1)" onMouseOut="MM_swapImgRestore()"></a>
  4. </li>
  5.  
  6. <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Ages_up.png" alt="Ages" class="thumb" id="Ages" onMouseOver="MM_swapImage('Ages','','../images/voicetypes/tabs/Ages_dn.png',1)" onMouseOut="MM_swapImgRestore()"></a>
  7.   <UL>
  8.  
  9.  <li><a href="boys2.asp?id=368&voicetype=40s">40's</a></li>
  10.  
  11.  
  12.           </UL>
  13.           </li>
  14.  
  15. <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/UK Accents_up.png" alt="UK Accents" class="thumb" id="UK Accents" onMouseOver="MM_swapImage('UK Accents','','../images/voicetypes/tabs/UK Accents_dn.png',1)" onMouseOut="MM_swapImgRestore()"></a>
  16.   <UL>
  17.  
  18.  <li><a href="boys2.asp?id=368&voicetype=Neutral">Neutral</a></li>
  19.  
  20.  
  21.           </UL>
  22.           </li>
  23.  
  24. <li><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/voicetypes/tabs/Styles_up.png" alt="Styles" class="thumb" id="Styles" onMouseOver="MM_swapImage('Styles','','../images/voicetypes/tabs/Styles_dn.png',1)" onMouseOut="MM_swapImgRestore()"></a>
  25.   <UL>
  26.  
  27.  <li><a href="boys2.asp?id=368&voicetype=Authoritative">Authoritative</a></li>
  28.  
  29.  
  30.  <li><a href="boys2.asp?id=368&voicetype=Documentary/Corporate">Documentary/Corporate</a></li>
  31.  
  32.  
  33.  <li><a href="boys2.asp?id=368&voicetype=Presenter/DJ">Presenter/DJ</a></li>
  34.  
  35.  
  36.           </UL>
  37.           </li>
  38.  
  39. </ul>
  40. </div>
I also am trying to set a width of the menu items to be wider than the buttons at the top of the memu i have set it wider in CSS but it moves all the buttons across

The page can be seen here

http://www.yaketyyak.co.uk/newpages/...&voicetype=All

many thanks

colin
Mar 4 '13 #1
2 1717
gits
5,390 Expert Mod 4TB
i followed the link and it works - tried it with chromium 24 - is there still an issue with that?
Mar 7 '13 #2
colinod
347 100+
Hi yes i have sorted that used a different jquery code i found!!!

thanks
Mar 7 '13 #3

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

Similar topics

0
by: shapper | last post by:
Hi, I have the following layout: http://www.27lamps.com/Beta/Menu/Menu.html It includes a JQuery menu based on SuckerFish: http://alistapart.com/articles/dropdowns The p tag after the menu...
9
by: Anic297 | last post by:
Hello, I'm a newbie in php. I would like to show a popup menu on my website and update the page when the user has changed its selection. I have looked over the Internet but haven't found what I...
53
by: souporpower | last post by:
Hello All I am trying to activate a link using Jquery. Here is my code; <html> <head> <script type="text/javascript" src="../../resources/js/ jquery-1.2.6.js"</script> <script...
17
by: Nyris | last post by:
I have this code used for the navigation on an HTML page. It's an accordion style dropdown menu. Everything works fine I just need to change it so that the submenuheader class allows it to be a...
2
by: dharmbhav | last post by:
Hello all, I am trying to develop a roll-over menu effect on a page. It works fine with all other browsers except IE6. Can some one please help me? HTML: <div class="menu-item-wrap">...
0
by: rjoseph | last post by:
Hi Guys Does anyone know of any simple/basic jquery vertical accordion scripts that allow me to place a html table in the info section (ie the window that pulls down and displays the hidden...
0
by: buzzard724 | last post by:
Ul li drop down menu works in FF not quite in IE Thank you for looking at this. The page is generated dynamically by php, js and jquery. The drop down menu ul- reports-li - works fine in FF. In...
1
by: Qaisar Hayat | last post by:
I have a home page from where I call another page insertfrm.php through Ajax. The problem is that insertfrm.php works fine when loaded directly in browser but does not work when loaded through ajax...
0
by: Stuart Hunter | last post by:
Hello, I am currently developing a Joomla site with a YOOtheme template 'Neo' and I'm finding the menu a little too 'quick to appear' on MOUSEOVER and I would really like a delay of around 0.5-1...
1
by: omar999 | last post by:
hi guys i really dont understand where i am going wrong.I've read countless articles including http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/ but still having trouble with...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.