Design, tweak, explore, prototype..have fun!
In Chapter 3 we saw that the HTML portion of a navigation menu is relatively straightforward. The CSS however can be something completely else! That's why the design section is the brains of the operation allowing you to shape your menu into (almost) any form, format or design. Just keep on tweaking and exploring and you can make your menu look exactly what you want it to be.
Did you click the design icon up top yet? If not, please do so and you will Menu Builder going into 'design mode'. Now you can change and adjust layouts, set backgrounds for the menu, submenus and buttons, add borders, adjust font styles, apply rounded corners and....well let's just get started.
It is important to understand that the design tools work on a number of different levels. You can edit:
- The main menu itself (the div or outer container with id=nav that we showed in Chapter 3).
- The main menu buttons:
- You can edit them all at the same time, or,
- You can edit one specific button individually.
- The submenus:
- You can edit them all at the same time, or,
- You can edit one specific submenu individually.
- The submenu buttons:
- You can edit them all at the same time, or,
- You can edit all buttons of a specific submenu at the same time, or,
- You can edit one specific submenu button individually.
That does not just sound very powerful and handy, it actually is! But there is one thing you need to take into account. As soon as you start applying design styles to a specific element, these styles will take priority over styles that are applied to a group. So if you select all menu buttons, increase the font size and one button does not change, you probably applied specific font styles to that button that take priority over global changes. Just something to keep in the back of your mind when crafting awesomeness!
In the top right of the application you can see the group or element that you are currently editing. By default the menu is selected when you enter in design mode. If you click it a drop down will appear that allows you to select different elements or groups.
Figure 5: Group and element selection dialog in design mode.
Widths, Padding and Margins
Before we dive into the shiny design controls highlighted above, let’s talk a little bit about how we can use the least flashy of them — width, margin and padding — to control the layout of your menus. Most CSS properties are very easy to understand, after all a background color property or control adds a background color. But for many people padding and margin concepts are a bit harder to grasp. Often there are multiple ways to accomplish the same thing and it may not be entirely clear what property to adjust for the desired result. Let’s have a look at what they call the “CSS Box Model” for an overview of how these different properties influence each other.
Padding adjusts the space “inside” the box (between the content and the border of the box) and can be used to manipulate the space within an element such as adding extra space between the Menu Button text and the top of the button to create a nice big button effect. Margins work on the space “outside” of the box (between the element itself and the other elements).
Figure 6: The CSS Box Model for Menu Builder.
So how does this padding thing work? Let’s say for example that you would like to put some extra space in the top area of the buttons. You can do this by adjusting the top padding of the buttons. Padding can be thought of as being part of the content an element contains, if the content grows, the element grows with it. If you increase the font size, the entire button will become taller. A similar effect can be reached by adjusting the line-height. This changes the space the text takes up equally above and below the actual text. In short, whereas line-height will add the same amount of space above and below the text, padding can be used to add space on top or at the bottom and works in addition to or on top of the line height. Pfew, exciting right? Just be glad you don’t have to do this by hand and can use simple controls to manipulate these powerful settings to get the menu of your dreams.
One word of advice: be careful to choose the correct area to adjust widths, paddings and margins. Take this example:
Say you wanted to add more space at the top of the menu so the text on the buttons is placed about ⅓ from the bottom border. If you try to increase the top padding of the menu instead of the buttons, you will end up putting space above the right button borders. This is because the dividers are right side button borders, but the outer border is (in the case of the Subtle Grey theme) part of the menu. And the space you added was therefore between the buttons and the menu border.
Figure 7: Top padding applied to the menu container creates space above the button borders
To adjust that spacing, it’s best to select all buttons and increase the top padding there. That will give you the space above and it will extend the divider lines (right button borders) between the buttons too.
Figure 8: Applying top padding to the menu buttons creates the right effect.
Once you master this little trick (and Figure 6 can really help you with that) the possibilities will be endless. Just make sure to select the right tool for the right job!
Margins can be defined as the space “outside” the box. So if you’re trying to create space between the buttons you’ll be using the margin control. To understand how this works try the following steps:
- Select the menu element using the selection dialog,
- Move down to the border controls and change the border drop down from ‘solid’ to ‘none’. This removes the border around the menu.
- Select all menu buttons, change the border drop down from ‘none’ to ‘solid’. Also make sure to set a size, 1 or 2px for example. This creates a border around the entire button. Note that some borders are thicker because there is no space between the borders of adjacent buttons, there are touching. In the next step we’re gonna change that.
- On the same pane, for the same selection, increase the left margin to let’s say 2.5%. Voila, in three (and a half ;)) steps we created a whole new menu design!
Squishy Menus Rock!
You will probably have noticed by now that all horizontal values are in percentages. This is what makes these menus flexible (squishy) and responsive (if they need to be). If you take any 4 button menu, select all buttons and change the width to 25%, they take up the exact width of the menu. You do need to subtract any margins from the button width — if all 4 buttons have a 1 percent right margin, the button width needs to be 24% to prevent the last button to wrap to the next line. (A single horizontal row is just like a bucket of water, fill it up over 100% and it will start to overflow!)
Now, if the screen becomes a bit smaller, all the buttons become proportionally smaller too. If you feel they become too small, simply select all buttons and change the width to 50% (again adjusted for any margins). You will see that the last two buttons now will be positioned below the first two. Again we created an entire new menu layout with a simple settings change! This is what the tangerine theme looks like with some the button width at 35% and about 15% left margin on the 'home' and 'about' buttons.
Figure 9: A responsive menu block that works well on mobile devices.
The possibilities are endless and we trust you got the hang of it by now. If not, just ask, we're always happy to help.
There are lots of different ways to style the menu items similar too the above examples. After working and experimenting with the program a bit (warning: you might get as addicted as we are) you will be able to very easily tell which padding or margin setting adjusts what area.
OK! Now that we understand a bit more about margins and padding, let’s talk about some other things you can do with these cool menu design controls.
