horizontales Menü

  • KSZ KSZ
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    09. 03. 2009, 11:48

    Hallo erstmal an alle!

    ich bin gerade dabei, das erstemal eine Webseite mit Typo3 umzusetzen.
    Vorher lief das nur über Dreamweaver (Div-Layer).

    Kurze Erklärung meines bisherigen Standes:

    Ich habe mir ein Template vorgebastelt mit Hilfe von Div-Layern und habe diese mit Marken (###LOGO### ,###MENU###, ###BREADCUMB###, ###FOOTERLAYER###) und Submarken (<!-- ###CONTENT### START--> Text <!-- ###CONTENT### END-->) eingeteilt. In LOGO ist eine komplette Headergrafik vorhanden, in BREADCUMB ist auch bereits integriert (dynamisch generiert) und in FOOTERLAYER steht bereits: Letztes Update der Website: 09.03.2009" (ebenfalls dynamisch).

    bei CONTENT kann ich bereits den Text einfügen.

    Und nun mein eigentliches Problem:

    ich will ein einfaches Text Menü generieren aus dem Seitenbaum heraus. Ich hatte mir bereits den einen Eintrag hier durchgelesen wo verschiedene Menüs erläutert werden, aber damit bin ich leider nicht zurcht gekommen, da diese alle vertikal waren. Ich wollte ein horizontales bauen.

    [TS]temp.menu = HMENU
    temp.menu {
    1 = TMENU
    1 {
    #expAll =1
    wrap = <ul id="nav1">|</ul>
    noBlur = 1
    NO = 1
    NO {
    wrapItemAndSub = <li>|</li>
    stdWrap.htmlSpecialChars = 1
    ATagTitle.field = title
    }
    ACT <.NO
    ACT {
    wrapItemAndSub = <li id="nav1act">|</li>
    }
    }

    2 < .1
    2 {
    wrap = <ul id="nav2">|</ul>
    ACT.wrapItemAndSub = <li id="nav2act">|</li>
    }

    3 < .2
    3 {
    wrap = <ul id="nav3">|</ul>
    ACT.wrapItemAndSub = <li id="nav3act">|</li>
    }
    }
    [/TS]

    ich vermute mal, dass ich dieses als Grundlage nehmen muss oder? Aber was muss ich ändern? <ul> und <li> hat ja etwas mit einer vertikalen Auflistung zutun.

    Tut mir leid, wenn ich mich etwas dusselig anstelle.


  • 1
  • 0 x
    79 Beiträge
    1 Hilfreiche Beiträge
    09. 03. 2009, 14:12

    Hi versuche es doch mal hiermit :)

    [TS]# -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    # Main Menü
    # -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

    lib.mainMenu = HMENU
    lib.mainMenu.entryLevel = 0
    lib.mainMenu.noBlur = 1
    #WAS NICHT ANGEZEIGT WERDEN SOLL
    lib.mainMenu.excludeUidList =
    lib.mainMenu{
    # erstes level
    1 = TMENU
    1.wrap = <div id="m1"><ul class="l1">|</ul></div>
    1{
    NO.ATagTitle.field = abstract // description // title
    NO.allWrap = <li class="no"> <span class="uid_{elementUid}">|</span> </li>
    NO.subst_elementUid = 1
    ACT=1
    ACT.wrapItemAndSub = <li class="act">|</li>
    }
    # zweites level
    2 = TMENU
    2.wrap = <ul class="l2">|</ul>
    2{
    NO.ATagTitle.field = abstract // description // title
    NO.allWrap = <li class="no"> <span class="uid_{elementUid}">|</span> </li>
    NO.subst_elementUid = 1
    ACT=1
    ACT.wrapItemAndSub = <li class="act">|</li>
    }
    }
    [/TS]

    Sieht dann so aus:

    [TS]<div id="m1">
    <ul class="l1">
    <li class="no"><span class="uid_9"><a href="uhren/a-piguet.html" title="Uhren">Uhren</a></span></li>
    <li class="act"><a href="schmuck/brillianten.html">Schmuck</a>
    <ul class="l2">
    <li class="act"><a href="schmuck/brillianten.html">Brillianten</a></li>
    <li class="no"><span class="uid_27"><a href="schmuck/ringe.html" title="Ringe">Ringe</a></span></li>

    <li class="no"><span class="uid_26"><a href="schmuck/schmuck.html" title="Schmuck">Schmuck</a></span></li>
    <li class="no"><span class="uid_25"><a href="schmuck/signiert.html" title="Signiert">Signiert</a></span></li>
    </ul>
    </li>
    <li class="no"><span class="uid_7"><a href="accessoires/silber.html" title="Accessoires">Accessoires</a></span></li>
    <li class="no"><span class="uid_6"><a href="ankauf-verkauf.html" title="Ankauf/Verkauf">Ankauf/Verkauf</a></span></li>
    <li class="no"><span class="uid_5"><a href="kontakt.html" title="Kontakt">Kontakt</a></span></li>

    </ul>
    </div>
    [/TS]

    vorteil:
    du kannst jedes LI noch per CSS ansteuern

    [TS]/* Menu CSS */

    #m1{display:block;float:left;margin:0;}
    #m1 ul{list-style:none;width:110px;padding:0;}
    #m1 li{display:block;list-style-type:none;font-size:11px;color:#969696;font-weight:400;float:left;width:110px;}
    #m1 .l1 a{color:#969696;text-decoration:none;text-transform:normal;float:left;display:block;padding-bottom:2px;width:110px;}
    #m1 .act a:link,#m1 .act a:visited,#m1 bold,#m1 .act a:hover,#m1 .act a:active{color:#777;display:block;font-weight:700;}
    #m1 .no a:link,#m1 .no a:visited{display:block;padding-top:0;color:#969696;font-weight:700;}
    #m1 .no a:hover,#m1 .no a:active{display:block;padding-top:0;color:#777;}
    #m1 .l2{padding-bottom:0;padding-left:0;width:110px;position:absolute;left:50%;margin-left:-372px;top:330px;}
    #m1 .l2 li{display:block;list-style-type:none;font-weight:400;border:0 none;margin-left:0;margin-bottom:0;color:#969696;}
    #m1 .l2 li,#m1 .l2 .last{color:#777;text-decoration:none;}
    #m1 .act .l2 li.no a{color:##969696;display:block;background-image:none;}
    #m1 .l1 .act .l2 .no a{border:0 none;color:#969696;}
    #m1 .l1 .act .l2 .no a:hover,#m1 .l2 .no a:active,#m1.l2 .act
    a:link,#m1.l2 .no a:link,#m1 .l2 .act a:visited{color:#777;text-decoration:none;}
    #m1 .l1 .act .l2 .act a{display:block;border:0 none;color:#777;}
    [/TS]

  • KSZ KSZ
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    09. 03. 2009, 14:53

    Danke schonmal nur... leider reagiert er gar nicht drauf....

    [TS]# -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    # Main Menü
    # -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

    lib.mainMenu = HMENU
    lib.mainMenu.entryLevel = 0
    lib.mainMenu.noBlur = 1
    #WAS NICHT ANGEZEIGT WERDEN SOLL
    lib.mainMenu.excludeUidList =
    lib.mainMenu{
    # erstes level
    1 = TMENU
    1.wrap = <div id="m1"><ul class="l1">|</ul></div>
    1{
    NO.ATagTitle.field = abstract // description // title
    NO.allWrap = <li class="no"> <span class="uid_{elementUid}">|</span> </li>
    NO.subst_elementUid = 1
    ACT=1
    ACT.wrapItemAndSub = <li class="act">|</li>
    }
    # zweites level
    2 = TMENU
    2.wrap = <ul class="l2">|</ul>
    2{
    NO.ATagTitle.field = abstract // description // title
    NO.allWrap = <li class="no"> <span class="uid_{elementUid}">|</span> </li>
    NO.subst_elementUid = 1
    ACT=1
    ACT.wrapItemAndSub = <li class="act">|</li>
    }
    }
    [/TS]
    des habe ich einfach in mein Template mit reingeschrieben

    zudem muss ich doch erst irgendwie den marker ansprechen oder?

    und den CSS Code, habe ich in meine eine CSS reingeschrieben. Ist doch richtig oder?

  • SLAng SLAng
    Flash Gordon
    0 x
    2757 Beiträge
    0 Hilfreiche Beiträge
    09. 03. 2009, 17:10

    Nein, das kannst du nicht einfach so übernehmen, da schon der Name des Marker anders ist und du müsstest deinen Marker wenn überhaupt erstmal auf lib.mainMenu kopieren.

    Außerdem ist das Beispiel denkbar schlecht, da man unsortierte Listen ul li mit wrapItemAndSub aufbaut und nicht mit allWrap.

    Deine Navigation erscheint dir vertical, da eine unsortierte Liste ul li... eben standardmäßig vertical ausgegeben wird. das kannst du umgehen indem du die Listenpunkte nach links fließen lässt, diesen also ein float:left; im CSS mitgibst.

    Ansonsten sieht dein Menü doch schon ganz ok aus.

  • 1