As a web user you may have noticed the benefit of using ‘select’ menus (also know as drop down lists) for website navigation. These menus are significantly easier to use on a mobile device – allowing visitors to get from A to B without having to delicately touch through a traditional menu and links.
Fortunately setting one up is very easy.
How to create a mobile friendly menu
- Copy the example HTML below
<select onchange="if(this.selectedIndex!=0)
self.location=this.options[this.selectedIndex].value">
<option value="http://www.itsupportguides.com" selected="selected">Home</option>
<option value="http://www.itsupportguides.com/windows-7-tips">Windows 7</option>
<option value="http://itsupportguides.com/configmgr-sccm-tips">CONFIGMGR / SCCM</option>
<option value="http://itsupportguides.com/office-2010-tips">Office 2010</option>
<option value="http://www.itsupportguides.com/exchange-2010-tips">Exchange 2010</option> </select>
- For each option change the ‘value’ to the menu URL and the display name (the part before </option>)
- Remove or add as many lines of ‘options’ as required
- Save into your website
- The menu will look like this:
You can then use a little CSS magic with @media queries to make the menu only appear on small screen devices (for example less than 640px – which covers hand held mobile devices like mobile phones).
See How to ‘Mobile Enable’ your website using CSS for how to do this.