July 2013 – CSS Responsive Menu

When your website has it’s main navigation as tabs across the top of the page, how will these appear when viewed on alternate media? If the design is to be “responsive”, ie: elements wrap down into columns depending on the available screen width, the links can also wrap down – OR, they can change into a drop-down <select> box. In terms of design, a drop-down box may be preferable and take up less space than links wrapping into multiple lines.

Option using jQuery –

The navigation links are set up as an unordered list, and CSS styling sets them at a fixed width. Using a media query to determine the width of the browser window (or alternate media) – the navigation becomes a <select> drop-down box when it falls below a certain width (in this case under 600-px wide) .

Option without jQuery –

This version only uses CSS, however, the menu needs to be coded in twice. This could be a realistic option IF there are not many navigation links, and/or the target audience requires less use of scripts.

Related links:
http://css-tricks.com/convert-menu-to-dropdown/
http://css-tricks.com/unobtrusive-page-changer/
http://bavotasan.com/2011/style-select-box-using-only-css/