Hallo!
Ich möchte ein Menü erstellen, welches 3 Level abdeckt. Das erste und zweite Level sollen horizontal angezeigt werden. Das dritte Level dann vertikal. Wie ich letzteres hinbekomme weiß ich.
Bsp.:
Level1: Seite1 Seite2 Seite3 Seite4
Level2: Unterseite2.1 Unterseite2.2 Unterseite2.3 ...
Level3:.....................Unterunterseite2.2.1
...............................Unterunterseite2.2.2
...............................Unterunterseite2.2.3
...............................Unterunterseite2.2.4
Eigentlich genauso wie hier: http://www.sport1.de
Das horizontale Menü für das 2te Level soll nur angezeigt werden, wenn auf den Link des ersten Levels geklickt wurde - außer beim ersten Laden; da sollen das Menü des 2ten Levels für die erste Seite (Seite1) sofort angezeigt werden.
Außerdem soll der entsprechende Teil des Level1-Menüs hervorgehoben werden. Das zweite horizontale Menü soll immer linksbündig unterhalb des ersten Eintrags des Level1-Menüs positioniert werden.
Ich bekomme es aber trotz diverser Tutorial einfach nicht hin. Vielleicht liegt es auch an meinen geringen CSS-Skills - keine Ahnung!
Hier mein aktualler TS-Code:
temp.main_nav = HMENU
temp.main_nav.entryLevel = 0
temp.main_nav.1 = TMENU
temp.main_nav.1 {
expAll = 1
wrap = <ul id="nav"> | </ul>
NO.wrapItemAndSub = <li>|</li>||*||*|<li class="last">|</li>|
NO.stdWrap.htmlSpecialChars = 1
ACT < NO
ACT = 1
ACT.wrapItemAndSub = <li class="act">|</li>||*||*|<li class="act last">|</li>|
ACT.stdWrap.htmlSpecialChars = 1
}
temp.main_nav.2 < temp.main_nav.1
temp.main_nav.2 {
expAll= 1
wrap = <ul id="subnav"> | </ul>
NO.ATagParams =
ACT.wrapItemAndSub = <li class="act2">|</li>
}
lib.main_nav < temp.main_nav
ich habe auch irgendwo gelesen, dass man dafür ein extra HMENU benötigt aber es muss doch auch anders gehen.
Naja, hat sicher einiges mit CSS zu tun. Aber du hast auch nen paar Fehler drinn.
Das zum Beispiel ACT < NO Da gehört ein Punkt vor das NO
Du hast in der ersten Ebene und in der Zweiten expAll aktiviert. Dann ist es klar, dass die Menüs sofort komplett gezeigt werden. Das zweite expAll kannst du dir dann allerdings sparen, wenn du den Menüzustand korrekt kopierst. Ist aber andersherum auch wieder egal, da du im zustand ACT eh alles nochmal schreibst, da kannst du dir das Kopieren komplett schenken
Die dritte Ebene kann ich nirgends finden
Soviel zum CSS:
Eine unordered List wird standardmäßig vertical aufgelistet. Wenn du also im CSS da kein float:left; verwendest, dann wird das Menü immer untereinander stehen. Weiß ja nicht ob du das gemacht hast oder nicht.
Jo, mehr kann ich nicht raten.
Schau in den ersten Thread des Menü-Bereichs. Da findest du reichlich Menübeispiele. Schau außerdem in den HowTo-Bereich, da gibt auch Threads für aus und aufklapp-Menüs (horizontal und vertical).
Danke aber die von Dir genannten Menübeispiele bin ich schon durch. Ich habe das ganze jetzt folgendermaßen gelöst:
temp.menu = COA
temp.menu.1 = HMENU
temp.menu.1.entryLevel = 0
temp.menu.1.1 = TMENU
temp.menu.1.1 {
expAll = 1
wrap = <ul id="level1-nav"> | </ul>
NO.wrapItemAndSub = <li>|</li>||*||*|<li class="last">|</li>|
NO.stdWrap.htmlSpecialChars = 1
ACT < NO
ACT = 1
ACT.wrapItemAndSub = <li class="act">|</li>||*||*|<li class="act last">|</li>|
ACT.stdWrap.htmlSpecialChars = 1
}
temp.menu.2 < temp.menu.1
temp.menu.2.entryLevel = 1
temp.menu.2.1 {
wrap = <ul id="level2-nav"> | </ul>
}
lib.main_nav < temp.menu
Das dritte Level wird vorerst nicht benötigt. Es sollte aber kein Problem sein, das nun bestehende Menü damit zu ergänzen.
Der Vollständigkeit halber hier noch die dazu gehörigen CSS-Definition:
#mainNav{
margin: 0 auto;
width: 906px;
height: 57px;
margin-top: 10px;
}
/* 1. Level */
#level1-nav {
display:block;
width: 906px;
background: white url(../img/bg_menu_top.gif) ;
z-index: 103;
height: 31px;
}
#level1-nav,
#level1-nav ul{
position:relative;
padding:0;
margin:0;
list-style:none;
}
#level1-nav li {
float: left;
text-align:center;
}
#level1-nav li a {
color: #575757;
font-style: normal;
font-variant: normal;
font-weight: 800;
font-size: 13px;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
text-decoration: none;
position: relative;
top: 0px;
left: 0px;
width: 100px;
height: 23px;
float: left;
padding: 8px 6px 0 6px;
background: url(../img/bg_menutop_div.gif) no-repeat right top;
}
#level1-nav LI:hover a ,
#level1-nav LI.sfhover a {
position: relative;
top: 0px;
left: 0px;
width: 100px;
height: 23px;
float: left;
background url(../img/bg_menutop_active.gif) repeat-x;
color: #ececec;
}
#level1-nav li.act {
font-weight:bold;
background:0;
background-color:#e4e7e5;
border-top-color:#e4e7e5;
border-bottom-color:#e4e7e5;
}
#level1-nav li.act a {
background: url(../img/bg_menutop_active.gif) repeat-x;
color: #ececec;
}
/* 2. Level */
#level2-nav {
display:block;
width: 906px;
background-color:#e4e7e5;
height: 28px;
}
#level2-nav {
position:absolute;
top:38px;
list-style:none;
margin:0;
width: 906px;
height: 32px;
background: url(../img/bg_menu_bottom_small.gif) repeat-x;
z-index: 102;
}
#level2-nav li {
float: left;
}
#level2-nav li a{
position:relative;
top:4px;
margin: 0;
font-size:13px;
color: #ececec;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 11px;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
height: 32px;
float: left;
padding-top: 7px 6px 0 6px;
background: url(../img/bg_menubottom_div.gif) no-repeat right 8px;
}
#level2-nav li.act{
}
#level2-nav li.act a{
color:red;
font-weight:bold;
}
#level2-nav li:hover a,
#level2-nav li.sfhover a{
color:red;
}
Wenn man hier Bilder hochladen könnte, hätte ich dies auch noch getan aber irgendwie geht das wohl noch nicht.
Falls jemand Verbesserungsvorschläge dazu haben sollte, dann wäre ich sehr dankbar, wenn derjenige sie hier posten würde.
Vielen Dank!