---
title: "Navigation wwf.de – technische Ansätze"
url: "https://www.typo3.net/d/112033-navigation-wwfde-technische-ansaetze"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2012-09-07"
last_reply: "2012-09-11"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Navigation wwf.de – technische Ansätze

TYPO3 › Menüs · 2 Antworten · gestartet 2012-09-07

## Eröffnungsbeitrag

**peppy** · 2012-09-07 · [Beitrag #1](https://www.typo3.net/d/112033-navigation-wwfde-technische-ansaetze/1)

Hallo zusammen,

ich finde die Navigation vom <http://www.wwf.de> sehr interessant und würde gerne bei einem kommenden Projekt ebenfalls solch eine Navigation verwenden.

Vorweg würde ich gerne wissen, wie man am geschicktesten bei solch einer Navigation vorgeht.

Konkretes Beispiel: Ich fahre über den Menüpunkt "Über uns". Dann erscheint in einer Box sowohl ein Teaser (Inhaltselement) als auch das Submenü.

Baue ich in dem Fall ganz normal eine Navigation auf und kombiniere diese dynamisch mit Inhaltselementen? Oder wird für die Inhalte dieser Box der komplette Inhalt einer Seite geladen (die wiederum die Unterpunkte aus einem Seitenbaum ausliest)?
Wie wären eure Ansätze für die Umsetzung? Wo könnten mögliche Vor-/Nachteile liegen?

Danke schon mal!

## Antworten

### [#2](https://www.typo3.net/d/112033-navigation-wwfde-technische-ansaetze/2) · Chrissli · 2012-09-08

Hallo peppy!

Ich würde eine Inhaltspalte für die Teaser verwenden:

```typoscript
temp.Navi = HMENU
temp.Navi {
  special = directory
  # deine rootseite
  special.value = 1 
  
  #erste ebene nur text
  1 = TMENU
  1.NO = 1
  1.NO {
    ATagParams.dataWrap = onmouseover="showsubmenu('sub_{field:uid}')" onmouseout="hidesubmenu('sub_{field:uid}')"
	linkWrap = <li>|</li>
  }
  1.wrap = <ul>|</ul>
  
  # jetzt wirds lustig
  2 = TMENU
  2.NO = 1
  2.NO {
    doNotLinkIt = 1
	stdWrap {
		cObject = COA
		cObject {
		  #teaser
		  1 = CONTENT
		  1 {
		    table = tt_content
			select {
			  pidInList.cObject = HMENU
			  pidInList.cObject {
			    special = directory
				#naechste zeile evtl ohne stdWrap
				special.value.stdWrap.field = uid
			    1 = TMENU
				1.NO = 1
				1.NO {
				  doNotLinkIt = 1
				  field = uid
				  stdWrap.wrap = |, |*| |, |*| |
				}
				#optional von wie vielen die teaser angezeigt werden sollen
				maxItems = 2
			  }
			  # texte aus deiner Teaser-Spalte
			  where = colPos = 1
			}
			renderObj = COA
			renderObj {
			  1 = TEXT
			  1.field = title
			  1.wrap = <h1>|</h1>
			  2 = IMAGE
			  2 {
			    file = clear.fig
				file.import = uploads/pics/
				file.import.field = image
				file.import.listNum = 0
				stdWrap.fieldRequired = image				
			  }
			  3 = TEXT
			  3.field = bodytext
			  3.wrap = <div class="teaser-text">|</div>
			  stdWrap.wrap = <div class="teaser">|</div>			  
			}
		  }
		  #normale menue-eintraege
		  2 = HMENU
		  2 {
		   special = directory
		   #siehe oben
		   special.value.stdWrap.field = uid
		   #evtl eintraege ueberspringen falls bereits angeteasert ( bezieht sich auf maxItems oben )
		   begin = 2
		   1.NO = 1
		   1.NO {
		     linkWrap = <li>|</li>
		   }
		   1.wrap = <ul>|</ul>
		  }
		  # hier muss spaeter jeweils die uid der dem menue uebereordneten seite stehen
		  stdWrap.dataWrap = <div id="sub_{field:uid}" class="teaser-menu">|</div>
		}
	}
  }
}
```

```css
.teaser-menu { display: none; }
```

```javascript
function showsubmenu(menuid) {
  var menu = null
  menu = document.getElementById(menuid);
  if(typeof menu == 'undefined' || menu == null) { return false; }
  menu.style.display = 'block';
}

function hidesubmenu(menuid) {
  var menu = null
  menu = document.getElementById(menuid);
  if(typeof menu == 'undefined' || menu == null) { return false; }
  menu.style.display = '';
}
```

Das ist jetzt nicht getestet und enthält bestimmt einige Fehler, aber das wäre zumindest mein Ansatz.
Natürlich muss die Formatierung und alles nocht etwas auasgebaut werden.

Gutes Gelingen!!

### [#3](https://www.typo3.net/d/112033-navigation-wwfde-technische-ansaetze/3) · peppy · 2012-09-11

Super, danke!

Ich werde dein Skript etwas umbauen, damit ich es ohne JavaScript lösen kann.

---

Quelle: „Navigation wwf.de – technische Ansätze“, typo3.net, https://www.typo3.net/d/112033-navigation-wwfde-technische-ansaetze
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.