How to make an elegant, expanding header menu?

Need help
1

I have a header menu, with is a Repeating Element on each page, under which I have a GroupFocus to show extra information, which is shown by a changing state when you click “Who is minnnis for?” However, I don’t feel like this is the best way to create an expanding header, which is what I really want. The Group Focus needs to be anchored to another element and I don’t think it works well as a full page width element nor on mobile. Page example.

I have tried to change the GroupFocus to a regular Group with is hidden on page load and collapsed when not visible. Again clicking the text, triggers a state change which makes the Group visible, however then you lose the advantage of the GroupFocus which is that you can click anywhere outside it to close it. You can to click on the text again to change the state to hide it.

I was wondering if anyone had any suggestions for a more elegant way to achieve a expanding header menu? Or is GroupFocus the correct way to go…?

(I suspect what i will end up doing is just taking further ahem inspiration from dribbble.com)

2

What if the group hide if the user doesn’t hover it after this is visible. So you click on the main menu, user need to continue to “hover” either the menu of the trigger button to see the menu (in your case who is Minnis for?) and if the user go away from theses two elements, this is automatically hidden.

1 Like
3

This topic was automatically closed after 70 days. New replies are no longer allowed.