Facebook like menu (responsive)
Without a doubt, the responsive technology is becoming more and more popular. This allows us to save time when we develop design intended for use on a variety of devices: from mobile devices to widescreen computers. There is no need to develop a special version of the site for each format (devices). Today we will create a new responsive menu that looks like facebook menu. To create this menu, we do not need javascript, everything is implemented using only CSS3 (for IE7-IE10, Firefox, Opera, Safari, Chrome and iPad/iPod/iPhone).
For today’s lesson, we have prepared two demonstrations (different responsive results). For the first menu, it turns into a selector, for the second one it turns into a vertical menu (you can use your touchscreen to open submenus):
Live Demo 1
Live Demo 2
download the sources
Step 1. HTML
The base of the menu – the usual UL-LI based menu:
index.html
Everything should be clear at this stage. To create the first version (with using the selector) we have to add this element (below the menu):
By default, this selector is hidden. It is visible only for small devices (due its responsive rules)
Step 2. CSS
In this section we start decorating the navigation menu. First of all, we have to define general styles:
css/main.css
Now, we can prepare styles for the top level elements:
The menu has blue gradient line, all the elements are float:left aligned (horizontally side by side). Next element is a separator between menu elements:
To complete the menu, we need to add styles for the submenu (drop down):
That’s it. The menu is ready, and we are ready to start adding responsive styles (using media queries). The CSS3 media queries are used to define how the styles will shift in some certain breakpoints(or specifically the device screen sizes). As you remember, for the first demo we prepared the selector, let’s customize its styles:
The first menu is finally ready, it has received its responsive styles.
Version 2 – Vertical menu
In order to give an opportunity to use a touchpad to handle with menu we can use an easy trick – using :target pseudo element. First of all, we have to modify our HTML layout (add few hidden span elements):
index2.html
The logic of a click-action is described in the following styles:
It means, than when our screen is small enough, it converts the menu into the vertical menu, with possibility to open submenus by clicking on its parents.
The second menu is finally ready too.
Live Demo 1
Live Demo 2
download the sources
Conclusion
We have just created two different (by logic) responsive menus that look like facebook menu (the same blue colors and styles). I’m sure that it will be very useful for you. Good luck and welcome back