Drop down box with list of subpages

With the TypoScript menu functions, you can do much more than just automatically generate simple text- or graphics-based navigations. To give you an example, we show you how you can generate a drop down box (selection box) that contains a list of page titles. To do so, all you need to do is to wrap each list items in a special way.

TypoScript: Fill a drop down box with subpages

SETUP

temp.drop_down_box = COA
temp.drop_down_box {
  10 = HMENU
  10 {
     # Special menu type 'directory': Get subpages of the current page
     special = directory
     # '123' is the uid of the page, for which the subpages shall be listed in the drop down box
     special.value = 123
     # Select box with JavaScript event 'onChange' that enables a jump to the target page, once an entry has been selected in the list
     wrap = <select name="dropdown_navigation" size="1" onChange="document.location.href='index.php?id=' + this.value">|</select>
     1 = TMENU
     1 {
       expAll = 1
       noBlur = 1
       NO {
         # 'value' holds the uid of the page in the list (is later appended to the target URL above)
         stdWrap.dataWrap = <option value="{field:uid}">
         allWrap = |</option>
         # Don't wrap the items in link tags
         doNotLinkIt = 1
       }
       # Inherit the 'allWrap' and 'doNotLinkIt' settings from the NO part
       CUR < copy">.NO
       CUR = 1
       CUR {
       # If we're on the current page, mark this list entry as 'selected'
         stdWrap.dataWrap = <option value="{field:uid}" selected="selected">
       }
     }
  }
}

This example generates a select box that contains all pages that are located one level below a given page in the page tree. A JavaScript onChange event handler handles the selection by transferring the user to the selected page. If this menu function is displayed on the current browser page, the selected attribute is added to the current item (CUR) in the drop down box.

Read on

Comments for Drop down box with list of subpages

Be the first to comment this article!

Visitors found this page by searching for these keywords:

typoscript dropdown menu · typo3 drop down menu · typoscript in subpage menu · typo3 if has subpages coa · typoscript hmenu special list