I have a top main menu visible on all my pages.

The first part of the menu contains 4 inputs to set the start date + hour (2 inputs) and the end date + hour (2 inputs). This defines my period.

The second part of the menu is 8 dropdowns with a total of 30 options. They are grouped into a certain pattern determined by the former developer and I cannot really give them a name. They all have the first option pre-selected. Each option will show some data (present between the range selected) on a map just below the menu.

After selection, the dates, hours and one option - A "validate" button appears below.


I would like to find the easiest way to create this menu.


Only show the 4 inputs aligned on 1 line and one button on the second line which would be "Select data" or "Select option".

This button will open a popup with a search bar and all the options as a small button. The user will then have a general view of all the option and easily find what he needs thanks to the search bar. After clicking on the option, the popup closes and the data are shown


Is it a good way to show the menu?

User should have the possibility to only edit the dates or to keep the dates and update the option

  • The idea here seems muddy. What is the goal of this application? What is the context? What does the menu have to do with this form?
    – invot
    Commented Feb 13, 2017 at 18:03
  • 1
    @invot Hey thanks for the extra bump ! Finally the design was totally changed and I do not use this layout anymore. Thanks for trying to help me !
    – Weedoze
    Commented Feb 14, 2017 at 7:25
  • @Weedoze Each dropdown has 30 options?
    – NB4
    Commented Jul 14, 2017 at 4:40
  • @NB4 Thanks for helping me but the client changed his mind and this menu is no more used
    – Weedoze
    Commented Jul 14, 2017 at 5:37

2 Answers 2


Thanks for your help !

Unfortunately the client changed his mind and decided to totally changed the menu.

I did not use a specific solution.


I would not recommend to complicate things. Content expansion is a great approach in situations like yours.

It's like if you have a search bar and an "advanced search" button that expands the form revealing additional search options. No additional windows or modals are required here.

Example figure

enter image description here

Example code


  • I dont understand... Thus I keep my menu and add an "advanced search" button ? Where ? Could you please do a quick draw ?
    – Weedoze
    Commented Sep 16, 2016 at 10:27
  • @Weedoze added and example figure and an actual example. Commented Sep 16, 2016 at 11:41
  • I dont really like this solution... + User should be able to only edit the inputs without re-selecting the options (Question edited) sorry
    – Weedoze
    Commented Sep 16, 2016 at 11:45
  • Disable the other fields then. What is stopping you from decreasing the number of options? Commented Sep 16, 2016 at 11:48
  • Disable the fields ? Decreasing the number of options ? What ?
    – Weedoze
    Commented Sep 16, 2016 at 11:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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