Here's a TS snippet I made a couple weeks ago, trying to emulate the setup of the menu at:

joehewitt.com/files/iphone/navigation.html

It uses the page ids for generating the CSS ids.

If a page has subpages, then the CSS id is added as section (#), otherwise it just links to the page.

lib.iPhoneMenu = COA
lib.iPhoneMenu {
   
  # Example TypoScript setup for creating a menu as un-nested lists.
  # For use with the CSS/JS setup found at http://joehewitt.com/files/iphone/navigation.html
   
  wrap = <div class="iPhoneMenu"> | </div>
  10 = HMENU
  10.entryLevel = 0
   
  # 1st level
  10.1 = TMENU
  10.1 {
    stdWrap.dataWrap = <ul id="c{field:pid}" selected="true"> | </ul>
    expAll = 1
    NO {
      linkWrap = <li>|</li>
    }
    IFSUB < .NO
    IFSUB = 1
    IFSUB.doNotLinkIt = 1
    IFSUB.stdWrap.typolink.parameter.data = page:uid
    IFSUB.stdWrap.typolink.section.field = uid
  }
   
  # 2nd level
  20 < .10
  20.1.stdWrap.dataWrap >
  20.1.NO.doNotShowLink = 1
  20.1.IFSUB.doNotShowLink = 1
  20.2 < .10.1
  20.2.stdWrap.dataWrap = <ul id="c{field:pid}"> | </ul>
   
  # 3rd level
  30 < .20
  30.2.stdWrap.dataWrap >
  30.2.NO.doNotShowLink = 1
  30.2.IFSUB.doNotShowLink = 1
  30.3 < .10.1
  30.3.stdWrap.dataWrap = <ul id="c{field:pid}"> | </ul>
   
  # 4th level
  40 < .30
  40.3.stdWrap.dataWrap >
  40.3.NO.doNotShowLink = 1
  40.3.IFSUB.doNotShowLink = 1
  40.4 < .10.1
  40.4.stdWrap.dataWrap = <ul id="c{field:pid}"> | </ul>
}

This snippet was submitted by Peter Klein

Comments

Stig, 11-11-07 21:00:

---

Cool stuff!

bignut, 01-12-07 02:56:

---

can someone show in detail what else is needed besides the snippets in the template setup?

i got this error ...
The page is not configured! [type= 0][]

radu, 15-02-08 13:24:

---

make sure you create the page object on your template ;) (with type = 0)

tomas, 05-03-08 08:27:

---

Have you checked the css in different browsers? IE7 doesn't work for me - FF2 = ok

Add comment

* - required field

First name: *
Last name:
E-mail:
Enter the code:

*

Content: *