Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2010
    Location
    Edinburgh, Scotland
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need opinion on drop down navigation (usability etc) and possible code optimization

    Hi,

    I managed to make a jquery drop down navigation system. I'm needing an opinion on the code as I suspect it could be alot cleaner and more efficient. A couple of niggling usability problems bug me - when a main link is in its active state and it is clicked on again it will slide up and then down again - I'd prefer it if it just stayed down and didn't move anywhere. The major thing that bugs me is if you think it breaks usability etiquette becuase the buttons move everywhere. If you think this is the case I will not use it. I understand there are forums for usability testing but if anyone has their opinions I'd be happy to hear them.

    You can view the navigation system here:

    http://www.jrcreativedesign.co.uk/nav.html

    Thanks very much for your time and consideration.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    The 'bouncy' seems out of place in a menu, but it looks OK in a slide show. It would be nice if it closed on click as well as opened on click. Having it open smoothly is nice too, I've written a couple of accordion menus, as they're called, but they all 'snapped' open and closed, which is kind of jarring. They're also known as 'tree' menus because they use the tree construction that MS used in the Help files. They're the simplest of interactive menus to code.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    The 'bouncy' seems out of place in a menu, but it looks OK in a slide show. It would be nice if it closed on click as well as opened on click
    I agree. Or at least it should simply ignore a second click on the same menu. Having it "bounce" because you clicked again is odd.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Jul 2010
    Location
    Edinburgh, Scotland
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the replies.

    Yeh the bounce effect I don't want. I'm not a coder and couldn't think how to code it so it doesn't bounce. Any hints as to how change this?

    Maybe it's something along the lines of slideUp if class is active statement or something.

    Not actually sure how to write that tho. I will keep looking tho.

    Thanks
    Last edited by jgroebuck; 11-10-2010 at 10:32 AM.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by jgroebuck View Post
    I'm not a coder and couldn't think how to code it so it doesn't bounce
    If you are not a coder, why did you put yourself into this? Either learn JavaScript or hire a professional.

    JavaScript libraries (like JQuery) were made to ease the coder's work, not to replace it totally. A library does not supply the lack of knowledge, same as an auto-pilot does not replace a qualified aviator on board.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Jul 2010
    Location
    Edinburgh, Scotland
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If you are not a coder, why did you put yourself into this? Either learn JavaScript or hire a professional.
    I think it's fair to say many people who are not coders have to do a bit of it and the reason I posted was for a little pointer. It's not as if I'm completely ignorant - I made this accordion menu from my own knowledge of css, html and javascript.
    I'm sorry that quote caused you offence.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If you really made that yourself, then you're a coder. Honest. Much more so than the people who come here asking for help on finding all the prime numbers up to 1000, just for an example.

    I hadn't looked at the coding on the page before, so I did so now. Very very clean and neat. Looks professional.

    I don't use jQuery. (Looks like I'm going to have to, one of these days. But I'm a Luddite.) But I would think you could do this by examining to see if the element already has class "active" applied and either ignoring the click in that case or just doing the slide up. (Probably easiest with jQuery to just ignore the click.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Jul 2010
    Location
    Edinburgh, Scotland
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant, it's encouraging that you say that. But I know some coders who would sneer at such a claim! If my code looks professional it's because it often gets messy and I use a HTML formatter to tidy it up.

    I managed to significantly reduce my code and add some nice animation to my accordion menu.

    Here is the original I posted:

    http://www.jrcreativedesign.co.uk/nav.html

    And here is the new improved version:

    http://www.jrcreativedesign.co.uk/nav_01.html

    I have a problem with my new approach though. When the main links are clicked they drop down the sub links. But when the sub links are clicked they perform the action of the main links aswell - bouncing the menu. I understand why this happens. If you look at the code you see that when a link in a ul.nav_btn is clicked it performs the actions.

    Code:
    jQuery(function() {
    $('.sub_links').hide();
    $('.nav_btn').click(function() {
    $('.sub_links').animate({
        marginLeft: "20",
      }, 250 );
    $(".btn_box > img").rotate('0deg');
    $(".btn_box > img",this).animate({rotate: '90deg'}, 300);
    $('.sub_links').slideUp(400);
    $('.sub_links',this).slideDown(400);
    });
    });
    jQuery(function() {
    $('.sub_links').click(function() {
            $('.sub_links').stop().animate({
        marginLeft: "20",
      }, 250 );
            $(this).stop().animate({
        marginLeft: "40",
      }, 250 );
    					   
    });
    });
    
    _______________________________
    
    
    <ul class="nav_btn">
            <li class="main_links">
    
    
              <a href="#">
                <div class="btn_box">
                  <img src="images/arrow.png" width="14" height="14" alt=">" />
                  <div class="btn_txt">Home
                  </div>
                </div>
              </a>
    
    
            <li class="sub_links">
              <a href="#">
    
                sub
              </a>
            </li>
            <li class="sub_links">
              <a href="#">
    
                link
              </a>
            </li>
            <li class="sub_links">
              <a href="#">
    
    
                hello
              </a>
    
            </li>
          </ul>
          <ul class="nav_btn">
            <li class="main_links">
    
    
              <a href="#">
                <div class="btn_box">
                  <img src="images/arrow.png" width="14" height="14" alt=">" />
                  <div class="btn_txt">About
                  </div>
                </div>
              </a>
    
    
            <li class="sub_links">
              <a href="#">
    
                sub
              </a>
            </li>
            <li class="sub_links">
              <a href="#">
    
                link
              </a>
            </li>
            <li class="sub_links">
              <a href="#">
    
    
                hello
              </a>
    
            </li>
          </ul>
    So I tried to separate the actions performed by entering an if statment, hasClass .main_links as shown here:

    Code:
    jQuery(function() {
    $('.sub_links').hide();
    $('.nav_btn').click(function() {
    if($(this).hasClass('.main_links')) {
    $('.sub_links').animate({
        marginLeft: "20",
      }, 250 );
    $(".btn_box > img").rotate('0deg');
    $(".btn_box > img",this).animate({rotate: '90deg'}, 300);
    $('.sub_links').slideUp(400);
    $('.sub_links',this).slideDown(400);}
    });
    });
    But to no avail. Been at this for a couple of days now and it's the best I've got.

    Do you have any solutions?

    Thanks in advance.
    Last edited by jgroebuck; 11-14-2010 at 02:25 PM.


  •  

    Posting Permissions

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