On a website I created the menu bar contains a group (#1 in print screen below) of categories. When hovering above the group it displays below the categories (#2) and their corresponding subcategories (#3). The problem is that in some groups the number of categories has grown to such an extend that it is hardly usable. My client decided to add some more groups. I thought it was going to be 3 but he decided to go from the 6 current groups (highlighted in yellow) to 13 groups, which leaves me with the difficult task of making them fit in the existing menu bar.
Besides trying to reduce the font’s size is there any suggestion ?
Perhaps tell the client from hell that you will make the menu in two rows. As a result, you will need to make them clickable to open the menus, not via hover.
If you run the mouse over the top row, it will open and you won’t be able to get to the bottom row. So, clickable. (Or you can have the top menu row flyout below the bottom row.)
You could implement some sort of scroll on the menu bar or a button either end that when clicked slides them along a bit.
Someone asked a similar question a while ago and the result was this demo.
I’m not keen on the UI and would much prefer a click to show rather than the hover.
It may be that you need those yellow items as one main button which opens the 13 groups in a sub menu just under the main menu and then you can select the further items from there.
