Menu als unnested lists (iphone navigation)

Submitting your vote...
Rating: 4.2 of 5. 5 vote(s).
Click the rating bar to rate this item.

Hier ist ein TypoScript Snippet das ich vor ein paar wochen erstellt habe um das Setup des Menüs von joehewitt.com/files/iphone/navigation.html nachzubauen.

 

Ich benutze die Seiten id zum Genererieren der CSS Ids.

Wenn die Seite unterseiten besitz, dann wird die CSS Id als Section (#) hinzugefügt, ansonsten einfach der Link auf die Seite.

 

 

lib.iPhoneMenu = COA
lib.iPhoneMenu {
   
  # Beispiel Typoscript setup zum erstellen eines Menüs als unnested list.
  # Zum Benutzen von dem CSS/JS auf http://joehewitt.com/files/iphone/navigation.html geeignet.
   
  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>
   
}

page.123 < lib.iPhoneMenu

 

Dieses Snippet wurde von Peter Klein eingesendet




Comments


Roman, 08-05-08 14:26:
Hallo,
vielen Dank erstmal für das Snippet. Gibt es hierzu auch noch ein passendes CSS-File. Habe die Navigation von Joe Hewitt schon mal nachgebaut. Nur in Typo will es noch nicht rund laufen.

Wie bekomme ich es hin, dass zum Beispiel statt dem hier:
<li><a href=index.php?id=10">Link<a/></li>
das hier:
<li><a href=#Link">Link<a/></li>
im Code steht. Klar könnte das händisch eintragen, aber das macht irgendwie keinen Sinn.
Über Hilfe wäre ich echt dankbar. Bin lange raus aus Typo3 und will mich gerade wieder einfuchsen.
Greetz
Florian, 18-06-09 14:37:
@Roman: Ich vermute du willst RealUrl verwenden.
Seniore T, 03-07-09 09:51:
@Florian, meinst du die CSS vom Joe Hewitt? Die findest du doch hier:
http://joehewitt.com/files/iphone/iphonenav.css
Seniore T, 03-07-09 11:21:
sorry, das CSS passt natürlich nicht zum Snippet, das Posting war wohl ausserdem
1) am Thema vorbei und
2) an falsche Person

Add comment

* - required field

*



*
*

Top 10 Updates

Login geändert am  09-Sep-2010 11:31:35
Schöne Schriften mit Google Font API geändert am  20-May-2010 16:36:59
TS basierte Searchbox für Indexed Search geändert am  18-May-2010 18:26:54
TYPO3 SEO geändert am  30-Apr-2010 09:43:20
Suchmaschinenfreundliche grafische Überschriften in TYPO3 geändert am  30-Apr-2010 09:33:56
Erstellen eines einfachen Infocenters mit TYPO3  geändert am  17-Nov-2009 12:11:22
Funktionierendes Section Menu mit TemplaVoila geändert am  05-May-2009 12:42:40
"Nicht im Menü" in Sitemap anzeigen geändert am  05-May-2009 12:12:24
Implementation des DHTML Menüs von brainjar.com  geändert am  01-Feb-2009 14:01:36
Beispiel DHTML Menü geändert am  01-Feb-2009 13:47:38

Latest comments

01-Sep-2010 20:38:32
Ben Heuwing schrieb: Damit die aktuelle Seite nicht verlinkt wird, wie bei normalen Menüs den MENUITEMSTATE CUR...
Klickpfad / Rootline Menu / Breadcrumb Menu
31-Aug-2010 17:16:13
Peter schrieb: Hallo Zusammen, ich hätte eine Frage: Ich würde gerne den Seitentitel der ersten Ebene oberhalb...
Seitentitel von übergeordneter Seite ausgeben
26-Aug-2010 21:32:42
Mo schrieb: Aktuell:...
Mehrere Domains in einer Typo3 Installation verwalten
English
Suche: