SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Nov 2005
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Nav bar suggestions

    I came up with a pretty nice top nav bar for a site, but am having issues deciding what to do with the internal sub-navigation bar.

    Have a look at: http://dyi.li/2TY

    I'm trying to fix the gray box containing Products, Equipment, Service.

    Does anyone here have any suggestions? Right now it is pretty plain, boring and doesn't flow well with the top nav. I want to keep it horizontal so it doesn't take a chunk of the content area.

    Thanks

  2. #2
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi penguinator,

    The Link didn't work for me.
    Jon Matthews - founder - Deep Cognition Ltd.
    http://www.DeepTrawl.com - For Windows & Mac; check your site for errors
    http://www.CloudTrawl.com - Monitor your site for stuff that goes wrong on it's own

  3. #3
    SitePoint Addict
    Join Date
    Nov 2005
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jon,

    Thanks for the reply. Sorry about that. The link must have just expired. This one should work for 20 days. I didn't want to post a direct link.

    http://dyi.li/2WB

    Thanks

  4. #4
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. A couple of comments:

    - You're right, the top nav is nice!
    - In the top nav menu the order is "Service, Equipment, Products", whereas on the sub-nav it's "Products, Equipment, Service". I'd make them the same

    To answer the question, I don't think you need to do much, perhaps reduce the width, center and add some rounded corners...?

    siteShot.jpg

    For reference I applied the following to your subnav div to get that...

    width: 350px;
    margin-left: auto;
    margin-right:auto;
    border-radius: 5px;
    Jon Matthews - founder - Deep Cognition Ltd.
    http://www.DeepTrawl.com - For Windows & Mac; check your site for errors
    http://www.CloudTrawl.com - Monitor your site for stuff that goes wrong on it's own

  5. #5
    SitePoint Addict
    Join Date
    Nov 2005
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the comments. I'm more concerned that it isn't completely obvious what the subnav is, so I'm just looking for a way to make it more clear so that it's obvious for instance that you're on the vending page and Products, Equipment and Service are sub sections. The site's target audience is typically not the most tech savvy. What do you think?

  6. #6
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps build the H1 into the subnav and put something like "See also:" to the left of the links?
    Jon Matthews - founder - Deep Cognition Ltd.
    http://www.DeepTrawl.com - For Windows & Mac; check your site for errors
    http://www.CloudTrawl.com - Monitor your site for stuff that goes wrong on it's own

  7. #7
    SitePoint Addict
    Join Date
    Nov 2005
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JonMatthews View Post
    Perhaps build the H1 into the subnav and put something like "See also:" to the left of the links?
    I'll play around with it. Thanks for the input

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    And H1 is a STRUCTURAL tag, a and the heaviest one at that. Do NOT use it in a navigation list. Remember, your navigation items are LIST of links not page headings.

    A like the white space in your design. don't be afraid to be elegant and minimalistic. Really the only flaw ( to it's a biggie) is that one CANT tell is the gray box is a sub nav of something.

    you really have 3 choices:

    1) make it a drop down that flows from its parent.
    2) maybe have a b/g graphic like an arrow, that points to the parent
    3) make it an 'L ' shape.. that is the links are horizontal, as you have the left edge lined up and it is directly below the parent.

    Familiarity is important when it comes to nav and UX.

    hope that helps


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
  •