Need help with JQuery expandable menu

wondered if there’s any kind soul that could help me with a little problem i have. cant seam to find the solution my self now, after looking my self blind at the codes. When i click on a link(marked in the code), nothing happends. it’s suppose to open the corresponding page it’s linked to. All other links works.

Heres the Html code im strugeling with:

<ul id="menu">
  <li><a href="index.htm">Hovedside</a>
  <li><a href="Html/turistsenter.html">Turistsenter</a>       <----- This link is the issue!
<ul class="active">
 <li><a href="Html/overnatting.html">Overnatting</a></li>
   <li><a href="Html/bestilling.html">Bestilling</a></li>
 </ul></li>

Heres the script:

$(document).ready(function(){
$('#menu > li> ul ')
	.hide()
	.click(function(e){
		e.stopPropagation();
	});
$('#menu > li').has('ul').toggle(function() {
	$(this)
	.css('background-position', 'right -20px')
	.find('ul').slideDown();
}, function() {
	$(this)
	.css('background-position','right top')
	.find('ul').slideUp();
 });
});

i guess the solution is simple, but can’t figure it at this writing momemt.

Regards

Hi Shaindal. Welcome to the forums. :slight_smile:

Looks to me like you are missing the closing </li> at the end of the first line, which could be confusing jQuery.

<li><a href="index.htm">Hovedside</a>[COLOR="#FF0000"]</li>[/COLOR]

Thank you for the welcome :).

thought of that as well, tried it and still dont work. i got 4 of theese links. they are kinda the main link buttons to a group of underlying links… but they should show their respective info page when clicked. i tested it without having java enabled, and it works. so i guess its something with my java code.

OK, at this point it would be good to see a live link. :slight_smile:

one moment, i will upload it to my server :).

www.staurset-johnsen.com the site is up there now… :slight_smile:

Hmm, now I’m confused, as the menu seems to work fine for me (in Firefox).

With a menu like this, you don’t want the Turistsenter tab to lead to another page, because then the drop down effect won’t happen. You maybe need to rethink your menu setup.

A better idea is to do away with the JS altogether and make each of those main links link directly to their relevant section. Then, in that section, have the extra links appear in the menu so that people can view other pages in that section. Much more reliable and accessible. :slight_smile:

that was my fear that i have to rethink it. Though its fairly simple to sort it so the 4 missing pages will show. then i have to make seperate links for the Turistsenter, lysfenomene and UFO-senter so they will appear like the other underlying links. othervice i will just disable the JS script that runs the dropdown function so it will stay down all the time. Since all links work when i do that so. :).

like now. i have disabled the JS for the drop menu, now all links work… :slight_smile: if you could test it all for me i would be thankfull :slight_smile:

Your users will thank you for saving them unnecessary clicks and making the menu more accessible, so I’d say it’s better without the JS. I’m not too keen on the visited color of red, though. If you want to identify visited links, I’d do something more subtle, and maybe save a strong red color like that for when that link is the currently selected page.