Alle Menüebenen horizontal??

  • Schengo Schengo
    T3PO
    0 x
    26 Beiträge
    0 Hilfreiche Beiträge
    09. 08. 2007, 14:16

    Hallo zusammen.

    Ich bin noch ziemlich neu bei Typo3 und habe ein Menü übernommen.

    Da ich kein CSS-Spezialist bin, suche ich noch die Frage auf meine Antwort, ob es möglich ist alle Menüebenen horizontal darzustellen. Zur Zeit habe ich drei Ebenen, aber vielleicht soll noch ein, zwei dazukommen.

    Meine erste Ebene ist bereits horizontal, aber meine Bemühungen haben noch kein sauberes Ergebnis hinbekommen.

    Muss ich jedes ul- oder li-Tag einzeln ansprechen? Oder gibt es auch eine allgemeine Lösung?

    Danke schonmal für eure Bemühungen.

    [TS]page = PAGE
    page.10 = TEMPLATE
    page.10.template = FILE
    page.10.template.file = fileadmin/test_temp/index.html
    page.10.workOnSubpart = DOCUMENT_BODY
    page.10.subparts.content < styles.content.get
    page.10.marks.down < styles.content.getLeft
    page.10.marks.footer < styles.content.getRight

    page.15.workOnSubpart = DOCUMENT_BODY
    page.15.subparts.down < styles.content.getLeft

    page.headerData.20 = TEXT
    page.headerData.20.value = <link rel="stylesheet" href="fileadmin/test_temp/jdMenu.css" type="text/css" /><script type="text/javascript" src="fileadmin/test_temp/jquery-1.1.2.js"></script><script type="text/javascript" src="fileadmin/test_temp/jquery.bgiframe.js"></script><script type="text/javascript" src="fileadmin/test_temp/jquery.dimensions.js"></script><script type="text/javascript" src="fileadmin/test_temp/jquery.jdMenu.js"></script><link href="fileadmin/test_temp/jdMenu.slate.css" rel="stylesheet" type="text/css" />

    page.10.marks {
    MENU = HMENU
    MENU {
    #entryLevel = 1
    special = directory
    special.value = 2
    stdWrap.required = 1
    stdWrap.wrap =
    1 = TMENU
    1 {
    expAll = 1
    noBlur = 1
    wrap = <ul class="jd_menu jd_menu_slate">|</ul>
    NO = 1
    NO {
    ATagTitle.field = abstract // description // title
    wrapItemAndSub = <li>|</li>
    stdWrap = upper
    }
    CUR < .NO
    CUR = 1
    }
    2 < .1
    2.wrap = <ul>|</ul>
    2.CUR < .1.NO
    2.CUR = 1

    3 <.1
    3.wrap = <ul>|</ul>
    3.CUR < .1.NO
    3.CUR = 1
    }
    }
    [/TS]

    Zudem noch die CSS-Datei: jdmenu.css
    [HTML]ul.jd_menu,
    ul.jd_menu_vertical {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    ul.jd_menu ul,
    ul.jd_menu_vertical ul {
    display: none;
    }
    ul.jd_menu li {
    float: left;
    }

    /* -- Sub-Menus -- */
    ul.jd_menu ul,
    ul.jd_menu_vertical ul {
    position: absolute;
    display: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    z-index: 10000;
    }
    ul.jd_menu ul li,
    ul.jd_menu_vertical ul li {
    float: none;
    margin: 0px;
    display: inline;
    }

    [/HTML]

    und die CSS-Datei jdmenu.slate.css
    [HTML]ul.jd_menu_slate {
    height: 19px;
    border: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    clear: both;
    }

    ul.jd_menu_vertical {
    width: 200px;
    height: auto;
    clear: both;
    }

    ul.jd_menu_slate a,
    ul.jd_menu_slate a:active,
    ul.jd_menu_slate a:link,
    ul.jd_menu_slate a:visited {
    text-decoration: none;
    color: #000000;
    font-weight:bold;
    }
    ul.jd_menu_slate a:hover {
    text-decoration: none;
    color: #FF0000;
    font-weight:bold;
    }
    ul.jd_menu_slate ul li a,
    ul.jd_menu_slate ul li a:active,
    ul.jd_menu_slate ul li a:link,
    ul.jd_menu_slate ul li a:visited {
    color: #000000;
    font-weight:bold;
    }
    ul.jd_menu_slate li {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    padding: 2px 6px 4px 6px;
    cursor: pointer;
    white-space: nowrap;
    color: #000000;
    font-weight:bold;
    }
    ul.jd_menu_slate li.jd_menu_active_menubar,
    ul.jd_menu_slate li.jd_menu_hover_menubar {
    padding-left: 5px;
    border-left: 1px solid #FFFFFF;
    padding-right: 5px;
    border-right: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    color: #000000;
    font-weight:bold;
    }

    ul.jd_menu_vertical li.jd_menu_active_menubar,
    ul.jd_menu_vertical li.jd_menu_hover_menubar {
    padding-left: 6px;
    padding-top: 1px;
    border-top: 1px solid #FFFFFF;
    border-left: 0px;
    border-right: 0px;
    }

    ul.jd_menu_slate ul {
    border: 1px solid #FFFFFF;
    }
    ul.jd_menu_slate ul li {
    padding: 3px 10px 3px 4px;
    border: none;
    color: #FF0000;
    font-weight:bold;
    }
    ul.jd_menu_slate ul li.jd_menu_active,
    ul.jd_menu_slate ul li.jd_menu_hover {
    padding-top: 2px;
    border-top: 1px solid #FFFFFF;
    padding-bottom: 2px;
    border-bottom: 1px solid #FFFFFF;
    color: #FF0000;
    font-weight:bold;
    }
    ul.jd_menu_slate ul li.jd_menu_active a.jd_menu_active,
    ul.jd_menu_slate ul li.jd_menu_hover a.jd_menu_hover {
    color: #FF0000;
    font-weight:bold;
    }

    [/HTML]

    Gruß Schengo


  • 1
  • Dander Dander
    Flash Gordon
    0 x
    2287 Beiträge
    0 Hilfreiche Beiträge
    09. 08. 2007, 14:33

    Tach,

    am betsen du arbeitest mit float: left;
    in der css Datei beim jeweiligen Elment

    [HTML]ul.jd_menu ul li,
    ul.jd_menu_vertical ul li {
    float: left;
    margin: 0px;
    display: inline;
    }
    [/HTML]

  • Schengo Schengo
    T3PO
    0 x
    26 Beiträge
    0 Hilfreiche Beiträge
    09. 08. 2007, 14:45

    Hallo Dander.

    Danke für deine schnelle Antwort.

    Ich habe deinen Vorschlag mal umgesetzt und habe folgenden Effekt:
    Im IE habe ich einen ganz komischen Effekt. Erste Ebene ist einwandfrei. Die zweite Ebene mird beim hover der ersten Ebene vertikal angezeigt. Geht man kurz vom Menüpunkt runter und direkt wieder drauf, springt der auf horizontal um :o Die Unterebenen verhalten sich alle so.
    Im Firefox werden die erste und zweite Ebene korrekt angezeigt und die dritte vertikal.

    Hast du eine Idee?

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    09. 08. 2007, 16:56

    Das ist ausschließlich Sache von HTML und CSS - einfach mal eine Testdatei auf deinem Computer speichern und so lange probieren, bis du fit bist.

    Weitere Hilfe gibts sicher bei Google oder in einem HTML/CSS Forum.

    Grüße, Alex

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • Schengo Schengo
    T3PO
    0 x
    26 Beiträge
    0 Hilfreiche Beiträge
    09. 08. 2007, 22:34

    Ich bin etwas weitergekommen, habe aber immernoch ein Problem mit der Darstellung.

    Ich habe das Menü mal unter [url=http://www.die-supahelden.de/test/menu/index.html]http://www.die-supahelden.de/test/menu/index.html[/url] online gestellt.

    Die erste und zweite Ebene ist jetzt horizontal, aber nicht die dritte und vierte. habe schon etwas mit dem CSS-Befehl clear versucht, aber nicht erfolgreich.

    Ausserdem habe ich unterschiedliche Betrachtungweisen im IE und Firefox. Kann es am padding liegen? Hat jemand eine Idee?

    Hier nochmal der Quellcode (index.html)
    [HTML]<html>
    <head>
    <title>Test Menü</title>
    <script src="jquery-1.1.2.js" type="text/javascript"></script>
    <script src="jquery.bgiframe.js" type="text/javascript"></script>
    <script src="jquery.dimensions.js" type="text/javascript"></script>
    <script src="jquery.jdMenu.js" type="text/javascript"></script>
    <script type="text/javascript">
    // Initialization, you can leave this here or move this somewhere else
    $(function(){
    $('ul.jd_menu').jdMenu({ onShow: loadMenu
    //onHideCheck: onHideCheckMenu,
    //onHide: onHideMenu,
    //onClick: onClickMenu,
    //onAnimate: onAnimate
    });
    });
    function onAnimate(show) {
    //$(this).fadeIn('slow').show();
    if (show) {
    $(this)
    .css('visibility', 'hidden').show()
    .css('width', $(this).innerWidth())
    .hide().css('visibility', 'visible')
    .fadeIn('normal');
    } else {
    $(this).fadeOut('fast');
    }
    }
    var MENU_COUNTER = 1;
    function loadMenu() {
    if (this.id == 'dynamicMenu') {
    $('> ul > li', this).remove();

    var ul = $('<ul></ul>');
    var t = MENU_COUNTER + 10;
    for (; MENU_COUNTER < t; MENU_COUNTER++) {
    $('> ul', this).append('<li>Item ' + MENU_COUNTER + '</li>');
    }
    }
    }
    function unloadMenu() {
    if (MENU_COUNTER >= 30) {
    MENU_COUNTER = 1;
    }
    }
    // We're passed a UL
    function onHideCheckMenu() {
    return !$(this).parent().is('.LOCKED');
    }
    // We're passed a LI
    function onClickMenu() {
    $(this).toggleClass('LOCKED');
    return true;
    }
    </script>
    <link rel="stylesheet" href="jdMenu.css" type="text/css" />
    <link rel="stylesheet" href="jdMenu.slate.css" type="text/css" />
    <style type="text/css">
    body {
    margin: 0px;
    padding: 25px;
    font-family: sans-serif;
    font-size: small;
    }
    h1 {
    font-family: sans-serif;
    color: #0068B8;
    }

    li.LOCKED {
    font-weight: bold;
    }
    body {
    margin: 0px;
    margin-left: 15px;
    }
    </style>
    </head>
    <body>
    <ul class="jd_menu jd_menu_slate">
    <li>Item One
    <ul>
    <li>Item One
    <ul>
    <li>Item One
    <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
    </ul>
    </li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
    </ul>
    </li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
    </ul>
    </li>
    <li>Item Two
    <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
    </ul>
    </li>
    <li>Item Three
    <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
    [/HTML]

    jdmenu.css
    [HTML]ul.jd_menu {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }

    ul.jd_menu ul {
    display: none;
    }

    ul.jd_menu li {
    float: left;
    }

    /* -- Sub-Menus -- */
    ul.jd_menu ul {
    position: absolute;
    display: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    z-index: 10000;
    }

    ul.jd_menu ul li {
    float: left;
    margin: 0px;
    }

    ul.jd_menu ul {
    position: absolute;
    display: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    z-index: 10000;
    }

    ul.jd_menu ul li {
    float: left;
    margin: 0px;
    }[/HTML]

    jdmenu.slate.css
    [HTML]ul.jd_menu_slate {
    height: 19px;
    clear: both;
    }

    ul.jd_menu_slate ul li a,
    ul.jd_menu_slate ul li a:active,
    ul.jd_menu_slate ul li a:link,
    ul.jd_menu_slate ul li a:visited {
    color: #000000;
    }

    ul.jd_menu_slate li {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight:bold;
    padding: 2px 5px 4px 5px;
    cursor: pointer;
    white-space: nowrap;
    color: #000000;
    }

    ul.jd_menu_slate li.jd_menu_active_menubar,
    ul.jd_menu_slate li.jd_menu_hover_menubar {
    color: #FF0000;
    }

    ul.jd_menu_slate ul li {
    padding: 3px 10px 3px 5px;
    color: #000000;
    }

    ul.jd_menu_slate ul li.jd_menu_active,
    ul.jd_menu_slate ul li.jd_menu_hover {
    color: #FF0000;
    }
    [/HTML]

  • 1