With media queries, we can activate or deactivate CSS instructions when some device or viewport requirements are met. This is especially useful when we have to deal with elements that need to have different representations depending on the user's device. The menu is usually such an element. In this chapter we will develop a main menu system that displays perfectly on desktop browsers and mobile devices; we can call it Omni Menu. We're going to cover the following topics:
Setup operations
First level
Second level
Moving parts
Basic transitions
Introducing animations
Adding some colors
Media queries
Mobile version
Improving speed
In the next section we'll start creating a basic HTML menu structure. As usual, we can store all of the project's files in a folder named as the name of the project (omni_menu in this case). Before we begin, let's look at a screenshot of the final result:
