2tes Level auch horizontal [Gelöst]

  • 0 x
    76 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2009, 13:24

    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 [b]Seite2 [/b]Seite3 Seite4
    Level2: Unterseite2.1 [b]Unterseite2.2 [/b] Unterseite2.3 ...
    Level3:.....................Unterunterseite2.2.1
    ...............................Unterunterseite2.2.2
    ...............................Unterunterseite2.2.3
    ...............................Unterunterseite2.2.4

    Eigentlich genauso wie hier: [url]http://www.sport1.de[/url]

    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:

    [TS]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
    [/TS]

    ich habe auch irgendwo gelesen, dass man dafür ein extra HMENU benötigt aber es muss doch auch anders gehen.


  • 1
  • SLAng SLAng
    Flash Gordon
    0 x
    2757 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2009, 16:36

    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).

  • 0 x
    76 Beiträge
    0 Hilfreiche Beiträge
    27. 02. 2009, 14:21

    Danke aber die von Dir genannten Menübeispiele bin ich schon durch. Ich habe das ganze jetzt folgendermaßen gelöst:

    [TS]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
    [/TS]

    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:

    [HTML]#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;
    }[/HTML]

    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!

  • 1