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)
        <option value="" selected="selected">Home</option>
        <option value="">Windows 7</option>
        <option value="">CONFIGMGR / SCCM</option>
    <option value="">Office 2010</option>
<option value="">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.