my brain pondering horizontal subnav visual layout mairin October 25, 2011 Uncategorized (from bottom to top) Previous PostA proposal with(out) some meat to it Next PostI just wanted a piece of toast… 16 Comments Jasper St. Pierre October 25, 2011 at 3:51 pm 9 years ago Reply 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. mairin October 25, 2011 at 3:58 pm 9 years ago Reply 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… ao2 October 25, 2011 at 4:58 pm 9 years ago Reply 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 mairin October 25, 2011 at 5:06 pm 9 years ago Reply 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. ao2 October 25, 2011 at 5:24 pm 9 years ago 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 🙂 Jasper St. Pierre October 25, 2011 at 5:09 pm 9 years ago Reply 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. mairin October 25, 2011 at 5:10 pm 9 years ago Reply on a white arrow? Jasper St. Pierre October 25, 2011 at 5:16 pm 9 years ago Sure. Jasper St. Pierre October 25, 2011 at 5:23 pm 9 years ago I’m no you, but here you go: http://i.imgur.com/R9o2v.png mairin October 25, 2011 at 5:25 pm 9 years ago Reply 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!!! Harvey Kelly October 25, 2011 at 4:16 pm 9 years ago Reply #6 Absolutely. Certainly. Definardoly. Looks good. Simon October 25, 2011 at 4:51 pm 9 years ago Reply 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… comzeradd October 26, 2011 at 6:52 am 9 years ago Reply I think I like the first more than the others. It’s the more minimal approach 🙂 Sami January 19, 2012 at 4:20 pm 9 years ago Reply 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? mairin January 19, 2012 at 4:41 pm 9 years ago Reply 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/ Sami January 19, 2012 at 4:21 pm 9 years ago Reply also, i mean in css – not photoshop (obviously) Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *CommentName* Email* Website Save my name, email, and site URL in my browser for next time I post a comment. Notify me of follow-up comments by email. Notify me of new posts by email. This site uses Akismet to reduce spam. Learn how your comment data is processed.