O'Reilly logo

HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required