1

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.

menu

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

IDEA

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

FutureMenu

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 Feb 13 '17 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 Feb 14 '17 at 7:25
  • @Weedoze Each dropdown has 30 options? – NB4 Jul 14 '17 at 4:40
  • @NB4 Thanks for helping me but the client changed his mind and this menu is no more used – Weedoze Jul 14 '17 at 5:37
1

Thanks for your help !

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

I did not use a specific solution.

0

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

http://jsfiddle.net/zqsfx/

  • I dont understand... Thus I keep my menu and add an "advanced search" button ? Where ? Could you please do a quick draw ? – Weedoze Sep 16 '16 at 10:27
  • @Weedoze added and example figure and an actual example. – Ivan Venediktov Sep 16 '16 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 Sep 16 '16 at 11:45
  • Disable the other fields then. What is stopping you from decreasing the number of options? – Ivan Venediktov Sep 16 '16 at 11:48
  • Disable the fields ? Decreasing the number of options ? What ? – Weedoze Sep 16 '16 at 11:49

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.