Creating a CSS3 Responsive Menu
This tutorial aims to provide step by step instructions to enable you to create a responsive navigation menu that adapts to varying screen sizes, with the help of CSS media queries.
Creating a CSS3 Responsive Menu
Design Parameters: work your way up to larger screens
I adopted the Mobile First approach to designing the menu. In essence, this approach adopts a strategy of designing for mobile devices first, then working your way up to larger ones, such as desktop monitors. The base design is developed for the popular dimensions of mobile devices - 320 x 480. I then utilised media queries, primarily for scaling up to larger screen sizes, but also as an effective tool for enhancing the design.
The screen sizes for which the menu is designed are:
- 320 x 480
- 480 x 320
- 768 x 1024
- 1024 x 768
Let's begin by looking at the markup.
header I added two
nav tags, one for a button which opens the menu, whilst the other contains the menu items. Each menu item contains
span to represent the icon.
With the objective of hiding the button
#menu-button when the screen is wide enough to have the menu constantly visible next to the logo, I placed
header. This will enable you to situate the menu beside or beneath the logo.
We'll now look at styling this markup with CSS.
I used a CSS table to set the layout of the contents of the header -
Why use a CSS table? Because it's robust against layout changes and it requires less work than floats and
display:inline-block if you want to maintain columns side by side.
I also set the logo to scale down to the available space of its container by applying
max-width:100%. This prevents the image from staying larger than the width given to its container.
One strategy worth noting here is the use of
em instead of
px. A useful property of this unit is that it scales nicely to the current font size of the element. To work it out, divide the pixel amount by the current font size (in this case
I styled the button that opens up the menu with plenty of CSS3. Specifically I used
background-image: linear-gradient(...). I also used the
transition property to smooth out the transition between various states of the button.
Note that, in the CSS, I excluded browser/vendor specific properties such as
-webkit-box-shadow, for simplicity. In the actual CSS file these properties are included.
I altered the style of the button for
:active to allow it to give the impression of being selected. Additionally, I added a negative bottom margin to it so that it would sink down, to make it obvious it's been selected.
I've also added a final touch - giving it an image that represents the purpose and the behaviour of the button.
And here's the outcome of the CSS above:
Now let's look up the CSS for the menu itself.
To make sure the menu does not take up the whole screen when it pops up, I considered the following three options:
- Option 1: Display all items vertically, each in a separate row
- Option 2: Display two items in each row
- Option 3: Display all items horizontally, all in one row
Option 1 would be the best choice if the only constraint is the width of the screen, because you don't need to worry about the items being compressed. Unfortunately, however, the height is also very limited, so I elected Option 2.
For the container of the menu
#menu-drink, I used
box-shadow to make it look like it's slightly floating above the content.
To implement Option 2, I set the width of
li to 50%.
The majority of the rest of the CSS for the menu is just for customising the menu items. In the CSS below, I've highlighted some important properties that are easy to overlook:
The above mentioned CSS produces the following design, with a screen width of
This is it for the initial design.
The Media Queries
Noted below are the media queries I used. To keep it short and simple, I've excluded the actual CSS for styling the menu up for different screen sizes. Instead, I've inserted a comment to explain what I did for each media query:
You might have noticed the use of
min-width: ...px. This can be interpreted as "This media query kicks in when the minimum width is
Phew, we're all done with the CSS! Now we'll look at the jQuery code for the menu. I used jQuery to show or hide the menu when the button is selected, and also when window is resized.
Success! We now have a responsive navigation menu, neatly styled up with CSS3. Check out the demo below, and feel free to download this example for future use.
SHARE THIS POST
ABOUT THE AUTHOR
Onextrapixel is a leading online magazine and resource site for designers and web developers. The Singapore based portal aims to collect, explore, as well as share useful tips, news, tutorials, tools and resources; on design, development and other inspiration. We hope that everyone will find something here that is useful and interesting.