Changing your navigation with media queries
The media query can do more than just resizing images. You can use the media query to deliver a much more dynamic web page to your viewers. You can display a responsive menu based on different screen sizes using media queries.
Getting ready
To make a responsive menu system, using two different menus we will display a dynamic menu for three different browser window sizes.
How to do it…
For the smaller browser windows, and especially for mobile devices and tablets, create a simple select menu that only takes up a small amount of vertical space. This menu uses an HTML form element for the navigation options that fires a JavaScript code to load the new page on selection.
<div class="small-menu"> <form> <select ...
Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
