Javascript Jump Menu in TS

2009 December 1 | Filed in: typolink, TMENU, HMENU, Typoscript, Blog Christopher Torgalson

www.typo3apprentice.com wakes up after a long slumber and explains how to create a better jump menu with the Typoscript HMENU object and a bit of CSS and Javascript

Javascript Jump Menu in TS

This first post at www.typo3apprentice.com in far too long was motivated by Jochen Fröhlich's blog post List subpages in a dropdown selection box. In the post, Jochen shows the power of TYPO3's HMENU and TMENU objects by creating a select element listing pages in a menu. The menu uses a bit of javascript to jump to the selected page when a page is chosen.

I found the article interesting, having just completed a similar jump menu for a still-in-development site, and because he'd (quite correctly) used TMENU's CUR state to set the 'selected' attribute on the option element where I had used javascript. In this way, his solution was clearly superior.

However, there were a couple of points about Jochen's jump menu that I thought were handled better in my example:

this one uses typolink (see .typolink) for all occurrences of any part of a url
this one doesn't use any inline javascript at all

The following is my variant on the Typoscript jump menu (with the sensible addition of the use of CUR as per Jochen's example). First, we start with the planned HTML output:

The Desired Output

<formid="jump-menu"action="index.php?id=32"method="post">
<div>
<select>
<optionvalue="">Choose a page...</option>
<optgrouplabel="Pages A-M">
<optionvalue="http://example.com/index.php?id=120">Apples</option>
</optgroup>
<optgrouplabel="Pages N-Z"></option>
<optionvalue="http://example.com/index.php?id=123">Oranges</option>
</optgroup>
</select>
</div>
</form>

Jump Menu Planned Markup Download plain text version

This HTML is rendered by the browser like this:

HTML output

This is generated by a two-level TMENU; the top level provides the two <optgroup> elements, and the second level provides the alphabetically-sorted <option> elements:

: The menu structure

The Typoscript

That menu and the following typoscript will produce the needed output. Note the extensive use of .typolink and getText Typoscript datatypes to retrieve the full url to the pages in the menu.

lib.jumpMenu = COA
lib.jumpMenu {
### Create the opening form element; set action attribute to current page:
5 = HTML
5{
value {
typolink {
parameter.data = TSFE:id
returnLast = url
}
wrap = <form id="jump-menu" action="|" method="post">
}
}
### Create the select, optgroup and option elements:
10 = HMENU
10{
### Form element contents must be contained in a block-level element
wrap = <div>|</div>
special = directory
special.value = {$lib.jumpMenu.pid}
1 = TMENU
1{
### Begin the select--we want a blank option at the top:
wrap = <select><option value=""class="empty">Choose a page...</option>|</select>
expAll = 1
noBlur = 1
### We have two top level pages named 'Pages A-M' and 'Pages N-Z'. These will become optgroup elements:
NO {
doNotShowLink = 1
allWrap.cObject = HTML
allWrap.cObject {
value.dataWrap = <optgroup label="{field:title}">
}
wrapItemAndSub = |</optgroup>
}
}
### Create the dynamic option elements:
2 = TMENU
2{
NO {
### Don't show the link--it's just as easy to build it in this case:
doNotShowLink = 1
### Create an option tag that looks something like this '<option value="http://example.com/index.php?id=235">Page Title</option>':
allWrap.cObject = HTML
allWrap.cObject {
value {
typolink {
parameter.data = field:uid
returnLast = url
}
dataWrap = <option value="http://{getenv:HTTP_HOST}/|">{field:title}</option>
}
}
}
CUR < .NO
CUR = 1
CUR {
### When it's the current page, we add the selected attribute to the option element:
allWrap.cObject.value.dataWrap = <option selected="selected" value="http://{getenv:HTTP_HOST}|">{field:title}</option>
}
}
}
### Create the closing form tag:
###
15 = HTML
15{
value = </form>
}
}

Typoscript Jump Menu Download plain text version

The Javascript

Along with the markup, we need to provide a layer for the jump menu's behaviour–in other words we need some javascript or PHP code for the jump menu do actually do anything. In this case, we use javascript. Using a framework like jQuery or Mootools, this is easily accomplished:

jQuery Version

// jQuery jump menu
$(document).ready(function(){
$('#jump-menu')
.show()
.change(function(){
var jumpUrl = $(this).find(':selected').val();
if(jumpUrl != ''){
location.href = jumpUrl;
}
})
});

jQuery for Jump Menu Download plain text version

Mootools Version

// Mootools jump menu
window.addEvent('domready', function(){
$('jump-menu')
.setStyle('display', 'block')
.addEvent('change', function(){
var jumpUrl = this.getElement(':selected').value;
if(jumpUrl != ''){
location.href = jumpUrl;
}
})
});

Javascript Jump Menu in TS