my brain pondering horizontal subnav visual layout

(from bottom to top)

16 Comments

  1. Jasper St. Pierre says:

    Try making the arrow white instead of pink, or using a white bounding box with dark text. The connection between the arrow and the content, like in #1, is important.

    1. mairin says:

      The original-original design had a white arrow and I think maybe 9 out of 10 people I showed it to completely missed it. I used the pink color to trigger people’s bear/blood detector so they couldn’t miss it.
      #1 is way overkill because, again, bear/blood detector. So with #6 I’m linking the parent to the child items with both the bear/blood color as well as the actual position of the items…

      1. Hi,
        I had a couple of minutes to waste, and I played a little bit with it: http://imageshack.us/photo/my-images/231/subnav.png/
        Ciao,
        Antonio

        1. mairin says:

          Hi Antonio, this solves the problem for second-level nav items beautifully, but I worry it sacrifices the top-level nav items who don’t have sub-menu items under them.

          1. Yes, I guess the white arrow can still be too subtle, maybe getting rid of the arrow completely and adding a thick pink bottom-border on the top-level selected items too? But I don’t want to distract you too much 🙂

      2. Jasper St. Pierre says:

        Try putting a 1 or 1.5px gray border (or shadow) around the top of the arrow and between the navigations. The break in the line where the arrow indents should draw people’s attention to it.

        1. mairin says:

          on a white arrow?

          1. Jasper St. Pierre says:

            Sure.

          2. Jasper St. Pierre says:

            I’m no you, but here you go:
            http://i.imgur.com/R9o2v.png

        2. mairin says:

          Ooooh… if that grey border was pink… then it draws the eye using the bear/blood principle, yet maybe looks cleaner? i’ll give it a shot, thanks!!!

  2. #6 Absolutely. Certainly. Definardoly.
    Looks good.

  3. Simon says:

    Agreed, #6 is the best of the set. Positioning the submenu directly below the selected top-level menu item is good. And #2, #4, and #5 don’t quite hit the mark in terms of styling that submenu…

  4. I think I like the first more than the others. It’s the more minimal approach 🙂

  5. did you ever make this nav? I’m trying to make one like it and having problems with getting the subnav to line up beneath the main nav. How did you do it?

    1. mairin says:

      I did (s/photoshop/inkscape btw, i can’t help pointing it out 😉 )
      You can see it live here: https://community.dev.fedoraproject.org/packages/inkscape/sources/

  6. also, i mean in css – not photoshop (obviously)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.