SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    HTML Code:
    <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:

    Code:
    $(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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi Shaindal. Welcome to the forums.

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

    Code:
    <li><a href="index.htm">Hovedside</a></li>

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    OK, at this point it would be good to see a live link.

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one moment, i will upload it to my server .


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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hmm, now I'm confused, as the menu seems to work fine for me (in Firefox).

    Quote Originally Posted by Shaindal View Post
    When i click on a link(marked in the code), nothing happends. it's suppose to open the corresponding page it's linked to.
    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.

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. .

  8. #8
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    like now. i have disabled the JS for the drop menu, now all links work.. if you could test it all for me i would be thankfull

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •