Joomla 2.5 – Select (drop down) Menu Using JavaScript

joomla-2.5As 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

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

 

  1. For each option change the ‘value’ to the menu URL and the display name (the part before </option>)
  2. Remove or add as many lines of ‘options’ as required
  3. Save into your website
  4. 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.

Was this article helpful?

Related Articles