Archivi tag: menu

Responsive navigation menu

Giorgio Bongiorni

Telecommunication Engineer with more than 5 years experience in web development and SEO campaigns. Favourite languages are HTML5, PHP5, MySql, CSS3 and jQuery.

Latest posts by Giorgio Bongiorni (see all)

In the last year it has become very important to adapt our website layout to user screen size, in order to improve navigation experience and offer a usable way to present information. One of the first elements which are seen from users is the navigation menu: for this reason it’s important to design it to be intuitive and user-friendly. In this article we will introduce two techniques to create a responsive navigation menu: smart button and select menu.

Smart button menu

A first way to build a responsive navigation menu is to create a smart button. The first step is to create a complete navigation header, composed of a logo floated on the left, and a navigation bar and a smart button floated on the right (smart button is built via jQuery separately to keep HTML code clean). We can also add a little bit of CSS to improve presentation or influence link hover state (you can see it in the snippet below).

Now, thanks to CSS media queries, we can say that if user screen width is above 550px (you can change this breakpoint value depending on your needs), we show the navigation bar and hide smart button. When screen width decreases under 550px, navigation bar is displayed as a 100%-width block, placed under logo and hidden. The smart button is instead shown floated as a little block on the right.

A little jQuery script is then added to bind an event listener to button click: the action is obviously to toggle navigation bar visibility. Below you can find the link to the described code. To see it in action, simply resize result window until the CSS breakpoint triggers. You can customize all parameters you want, starting from media query parameters and logo url. If you want to create a new HTML document, please remember to include a call to jQuery library and include the script into a “document ready” callback.

Responsive navigation menu (smart button)

Drop-down menu

The second way to build a responsive navigation menu is to create a select element. This solution is very similar to the smart button code: the behaviour above 550px breakpoint is exactly the same. The difference comes when we are below 550px, where navigation bar is replaced with a drop-down select element containing navigation items.

As in the smart button solution, the drop-down menu is built separately via jQuery script, to keep HTML code clean. Current page url (where the script is invoked from) is retrieved inside the script and the corresponding element is selected into drop-down list. A change event lister is bound to select item: when an element is selected, the browser is redirected to relative url. Clearly, this is a base example and you can add some CSS to improve its presentation if you want. The described code is linked below.

Responsive navigation menu (drop-down menu)

Conclusions

In this article we presented 2 techniques to build a responsive navigation menu. Thanks to CSS media queries we can retrieve user screen resolution and adapt menu appearance to offer the best experience. Of course, there are a lot of other variations and many improvements you may perform (i.e. manage a second-level menu), but if you need a simple navigation menu these solutions may be a start point.