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

CSS/Jquery menu

100+
P: 347
I have a CSS menu that works fine until i use images for the main buttons when the sub menu does not stay open any longer.

html is

Expand|Select|Wrap|Line Numbers
  1. <ul id="nav">
  2.   <li class="dropdown"><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/artistnav/Accents.png" id="accents"></a>
  3.     <ul class="dropdown-menu">
  4.     <li><a href="boys.asp?id=USA/Mid-Atlantic">USA/MID ATLANTIC</a></li><BR>
  5.     UK ACCENTS<br>
  6.         <li><a href="boys.asp?id=Brummie">BRUMMIE</a></li>
  7.         <li><a href="boys.asp?id=Geordie">GEORDIE</a></li> 
  8.         <li><a href="boys.asp?id=Irish">IRISH</a></li>
  9.         <li><a href="boys.asp?id=Lancashire">LANCASHIRE</a></li>
  10.         <li><a href="boys.asp?id=London">LONDON</a></li>
  11.         <li><a href="boys.asp?id=Manchester">MANCHESTER</a></li>
  12.            <li><a href="boys.asp?id=Midlands">MIDLANDS</a></li>
  13.         <li><a href="boys.asp?id=Neutral">NEUTRAL</a></li> 
  14.         <li><a href="boys.asp?id=Northern">NORTHERN</a></li>
  15.         <li><a href="boys.asp?id=RP">RP</a></li>
  16.         <li><a href="boys.asp?id=Scottish">SCOTTISH</a></li>
  17.         <li><a href="boys.asp?id=Welsh">WELSH</a></li>
  18.         <li><a href="boys.asp?id=West-Country">WEST COUNTRY</a></li>
  19.         <li><a href="boys.asp?id=Yorkshire">YORKSHIRE</a></li><br>
  20.         WORLD ACCENTS<br>
  21.         <li><a href="boys.asp?id=Afro-Caribbean">AFRO CARIBBEAN</a></li>
  22.         <li><a href="boys.asp?id=African">AFRICAN</a></li>
  23.         <li><a href="boys.asp?id=Arabic">ARABIC</a></li>
  24.         <li><a href="boys.asp?id=Australian">AUSTRALIAN</a></li>
  25.         <li><a href="boys.asp?id=Dutch">DUTCH</a></li>
  26.         <li><a href="boys.asp?id=French">FRENCH</a></li>
  27.         <li><a href="boys.asp?id=German">GERMAN</a></li> 
  28.         <li><a href="boys.asp?id=Hebrew">HEBREW</a></li>
  29.         <li><a href="boys.asp?id=Icelandic">ICELANDIC</a></li>
  30.         <li><a href="boys.asp?id=Indian">INDIAN</a></li>
  31.         <li><a href="boys.asp?id=Mexican">MEXICAN</a></li>
  32.         <li><a href="boys.asp?id=Norwegian">NORWEGIAN</a></li>
  33.         <li><a href="boys.asp?id=Oriental">ORIENTAL</a></li>
  34.         <li><a href="boys.asp?id=Russian">RUSSIAN</a></li>
  35.         <li><a href="boys.asp?id=Scandi">SCANDI</a></li>
  36.           <li><a href="boys.asp?id=South-African">SOUTH AFRICAN</a></li>
  37.           <li><a href="boys.asp?id=Spanish">SPANISH</a></li>
  38.         <li><a href="boys.asp?id=Swedish">SWEDISH</a></li>
  39.          <li><a href="boys.asp?id=Turkish">TURKISH</a></li><br>
  40.          FOREIGN LANGUAGES<br>
  41.          <li><a href="boys.asp?id=French-Language">FRENCH</a></li>
  42.         <li><a href="boys.asp?id=Hebrew-Language">HEBREW</a></li>
  43.         <li><a href="boys.asp?id=Hindi-Language">HINDI</a></li>
  44.         <li><a href="boys.asp?id=Icelandic-Language">ICELANDIC</a></li>
  45.         <li><a href="boys.asp?id=Norwegian-Language">NORWEGIAN</a></li>
  46.         <li><a href="boys.asp?id=Punjabi-Language">PUNJABI</a></li>
  47.     </ul>
  48. </li>
  49. <li class="dropdown"><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/artistnav/Ages.png" id="ages"></a>
  50.     <ul class="dropdown-menu">
  51.     <li><a href="KIDS.asp?id=aLL">KIDS</a></li>
  52.         <li><a href="boys.asp?id=Teenage">TEENAGE</a></li>
  53.         <li><a href="boys.asp?id=Teenage-20s">TEENAGE - 20's</a></li>
  54.         <li><a href="boys.asp?id=20s">20's</a></li
  55.         ><li><a href="boys.asp?id=20s-30s">20's - 30's</a></li>
  56.         <li><a href="boys.asp?id=30s">30's</a></li>
  57.         <li><a href="boys.asp?id=30s-40s">30's - 40's</a></li>
  58.         <li><a href="boys.asp?id=40s-50s">40's - 50's</a></li>
  59.         <li><a href="boys.asp?id=40s">40's</a></li>
  60.         <li><a href="boys.asp?id=50-Plus">50 PLUS</a></li>
  61.  
  62.     </ul>
  63. </li>
  64. <li class="dropdown"><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/artistnav/Styles.png" id="styles"></a>
  65.     <ul class="dropdown-menu">
  66.         <li><a href="boys.asp?id=Animation/Cartoon">ANIMATION/CARTOON</a></li>
  67.         <li><a href="boys.asp?id=Aspirational">ASPIRATIONAL</a></li>
  68.         <li><a href="boys.asp?id=Authoritative">AUTHORITATIVE</a></li>
  69.         <li><a href="boys.asp?id=Characterful/Quirky">CHARACTERFUL/QUIRKY</a></li>
  70.         <li><a href="boys.asp?id=Comedy/Humorous">COMEDY/HUMOROUS</a></li>
  71.         <li><a href="boys.asp?id=Cool/Contemporary">COOL/CONTEMPORARY</a></li>
  72.         <li><a href="boys.asp?id=Deep/Powerful/Dramatic">DEEP/POWERFUL/DRAMATIC</a></li>
  73.         <li><a href="boys.asp?id=Documentary/Corporate">DOCUMENTARY/CORPORATE</a></li>
  74.         <li><a href="boys.asp?id=Dry/Ironic">DRY/IRONIC</a></li>
  75.         <li><a href="boys.asp?id=Friendly/Upbeat">FRIENDLY/UPBEAT</a></li>
  76.         <li><a href="boys.asp?id=Impressions">IMPRESSIONS</a></li>
  77.         <li><a href="boys.asp?id=Kid-Friendly">KID FRIENDLY</a></li>
  78.         <li><a href="boys.asp?id=Light/Bright/Fresh">LIGHT/BRIGHT/FRESH</a></li>
  79.         <li><a href="boys.asp?id=Movie-Trailer">MOVIE TRAILER</a></li>
  80.         <li><a href="boys.asp?id=Natural/Unaffected">NATURAL/UNAFFECTED</a></li>
  81.         <li><a href="boys.asp?id=Ordinary-People">ORDINARY PEOPLE</a></li>
  82.         <li><a href="boys.asp?id=Posh">POSH</a></li>
  83.         <li><a href="boys.asp?id=Presenter/DJ">PRESENTER/DJ</a></li>
  84.         <li><a href="boys.asp?id=Reassuring">REASSURING</a></li>
  85.         <li><a href="boys.asp?id=Sensitive">SENSITIVE</a></li>
  86.         <li><a href="boys.asp?id=Sexy">SEXY</a></li>
  87.         <li><a href="boys.asp?id=Sophisticated">SOPHISTICATED</a></li>
  88.         <li><a href="boys.asp?id=Sports-Commentator">SPORTS COMMENTATOR</a></li>
  89.         <li><a href="boys.asp?id=Versatile">VERSATILE</a></li>
  90.      </ul>
  91. </li>
  92. </ul>
so if i change

<a href="javascript:void(0)"><img src="http://bytes.com/submit/images/artistnav/Accents.png" id="accents"></a>

to

<a href="javascript:void(0)">ACCENTS</a>

all works fine

Jquery is

Expand|Select|Wrap|Line Numbers
  1.  $('#nav li').click(function() {
  2.  
  3.         var slideToggle = this;
  4.         if ($('ul', this).is(':visible')) {
  5.             $('ul', this).slideUp(function() {
  6.                 $('#content, #topnav, #top, #bottomnav').animate({
  7.                 opacity:1
  8.             },200);
  9.                 $(slideToggle).removeClass('active');
  10.             });
  11.         }
  12.         else {
  13.             $('.dropdown-menu').slideUp(200);
  14.             $('ul', this).slideDown(1000);
  15.             $('#content, #topnav, #top, #bottomnav').animate({
  16.                 opacity:.5
  17.             },200);
  18.             $(slideToggle).addClass('active');
  19.         }
  20.     });
  21.     $('body').click(function(event) {
  22.         if (!$(event.target).is('a')) {
  23.             $('.dropdown-menu').slideUp(200);
  24.             $('#content').animate({
  25.                 opacity:1
  26.             },200);
  27.         }
  28.     });
Im sure its something to do with the JQuery but just cant see it

page is here

http://www.yaketyyakallmouth.com/pages/boysz.asp?id=All
Aug 29 '13 #1
Share this Question
Share on Google+
2 Replies


Exequiel
100+
P: 287
Can you explain more further if what is your problem to that page that you've gave? because I don't get if what are the problem that you are mean for. . .
Aug 30 '13 #2

100+
P: 347
When you click on the buttons for the menu they open then close when using images with text only they open and stay open till you click again
Aug 30 '13 #3

Post your reply

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