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.
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…
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.
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 🙂
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.
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…
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?
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.
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…
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
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.
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 🙂
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.
on a white arrow?
Sure.
I’m no you, but here you go:
http://i.imgur.com/R9o2v.png
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!!!
#6 Absolutely. Certainly. Definardoly.
Looks good.
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…
I think I like the first more than the others. It’s the more minimal approach 🙂
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?
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/
also, i mean in css – not photoshop (obviously)