Dropdown Menu with Ditto

Here's a simple example how to use Ditto to generate a dropdown / select menu.

Imagine you have a container full of documents, and you need to build a dynamic dropdown-menu for these documents for easy navigation, here's how:

Create a chunk named "dropdown" with the following content:

<option value="[~[+id+]~]">[+pagetitle+]</option>

In case you didn't know by now, the special syntax [~[+id+]~] generates a link: Even if you use "SEO-friendly URLs", Evo will make sure it outputs the correct page-name for you.

In your document (or template) insert:

<script type="text/javascript" language="javascript">
function jumpTo(selObj) {
    thevalue = selObj.options[selObj.selectedIndex].value;
    if (thevalue != 0) window.location = thevalue;
    return false
}
</script>
<form action="#" onsubmit="return false" method="post">
  <select name="goto" onChange="jumpTo(this);">
    <option value="please choose one">Please choose one</option>
    [!Ditto? &parents=`56` &tpl=`dropdown` &display=`100` &total=`100` &sortBy=`pagetitle` &sortDir=`ASC`!]
  </select>
</form>

The small "javasscript" bit is responsible for jumping to the selected URL. If you use it on every page, it makes sense to save it as an external file of course.

The rest is just the form-enclosure with a Ditto call that lists all documents of parent id 56, sorts in ASCending order by pagetitle, and uses our custom template "dropdown".

Usability Tip

For browsers not using JS and searchbots, you can (and should) create simple text-links inside <noscript></noscript> tags. Depending entirely on javascript alone for navigation can be dangerous in this regard.

Suggest an edit to this page.