4

To get straight to the point, this is causing trouble:

enter image description here

The menu on top (work news about media) is a dropdown menu. The problem is that it has a white background, and the page is also white, and the text colors match too. This results in a weird, disconcerting and un-esthetic effect when the drop down rolls down over the page contents.

The design is minimalist, uses only two colors and not many elements. This dropdown looks real good on a non-white background, such as on this page.

So, we're pondering ways of separating it from the background.

A border is an obvious solution, another pondered solution is reducing the opacity of the whole page when the dropdown is activated.

Is there any other way?

Edit: Removed the original link because the design is being updated. Will keep you updated...

Improve this question
0
5

Agree on the subtle differences. Since your site does not seem to be a fan of drop shadows, i shall only mention that once :-)

Basically, what I would do, is simply play around with inverting the colours you already have. In the case of the dark blue, I would obviously go easy; a same colour a good deal weaker. Here are a few experiments. Pardon the very crude execution, but hope I get the idea across. Please note that these are just general ideas, and does not look very good. If you fiddle with the concept,though, I am sure you will come up with something good.



Dropshadow



enter image description here



Inverted blue background (colour piced from the "nabil gholam..")



enter image description here



Inverted with gray picked from other text:



enter image description here

Improve this answer
2
  • I think version 2 or 3 is the way to go. Really makes it pop without disturbing the minimalist feel, and color is much simpler to render than drop shadows. You won't have to worry about whether a browser can pick it up. – Lauren-Clear-Monica-Ipsum Jan 30 '14 at 11:26
  • Good point, @LaurenIpsum my sketches are rather inelegant; softer colours would look much better, but it is usually good to work with the elements/colours that are already there. – benteh Jan 30 '14 at 13:33
3

So I agree, this is obviously a clean design and you don't want to commit to doing anything craaaazy :)

Rather than a full border like you mentioned in your question, why not do something like this?

half border around menu

Like TunaMaxx said subtle differences are key

So the border is only on the left and the bottom and isn't much more than a 2px line, you could use the grey shade that you're using for the text, the blue from the menu or a little darker, either choice should work. The text is a little larger and a little darker. Also around the half border I suggest leaving some white space (maybe 10-15px) that way you won't have any words from the page beneath the menu seeming like they are trying to climb onto it. (as you can see here '2010' is a little close to 'intitutional' this is why I would creat more white space)

There is a little tidying to do there but I think the idea would work.

Just to mention it's still right aligned and stuff in Chrome though I gather from the comments that you already know that.

Good luck with your site :)

Improve this answer
1
  • 1
    Looks great :) and is also easy to implement. Regarding Chrome, I'm aware of one issue, I'm not sure it's the one you're mentioning... but in any case cross-browser testing will be done at a later stage. Thanks :) – Rolf Jan 29 '14 at 21:04
2

Design is subjective of course, but for me there is no priority of information. When you open the menu items, there is nothing little to differentiate from the base page:

  • Font is effectively the same size, color, weight
  • Background is the same color
  • The menu child items almost align with the underlying grid.

I understand the minimalist, clean approach. As I think you already feel, at least in the menu it has been take too far.

Try:

  • Slightly different background color on menu child items. We're talking #eee versus #fff
  • Subtle box-shadow on menu child items to gently suggest a layer or depth
  • Font color something like the active / hover state color
  • Some sort of indicator on child items with nested child items.
Improve this answer
0
1

Did some experimenting myself, taking many of your ideas in consideration (thanks a lot!)

It seems that somehow connecting the submenu with the menu link helps...

enter image description here

A slight (subtle!) drop shadow could work too...

enter image description here

Maybe a combination of both?

enter image description here

It also seems that having only one bold element in the menu (the hovered element) also helps:

enter image description here

It seems that the problem is not only the backgrounds being confounded, but also that the submenu is (visually) not strongly connected to the menu item.

Improve this answer
0
1

What happened in the end - and that was a request from the customer, was that we added an overlay on the whole page when the menu is visible.

You can see it in action here: http://nabilgholam.com/all-projects (the website is now live, finally)

I'm even less sure what to pick as accepted answer, now.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.