Hallo zusammen,
ich finde die Navigation vom 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!
Hallo peppy!
Ich würde eine Inhaltspalte für die Teaser verwenden:
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>
}
}
}
}
.teaser-menu { display: none; }
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!!
Super, danke!
Ich werde dein Skript etwas umbauen, damit ich es ohne JavaScript lösen kann.