Aufklapp Menü erstellen. [Gelöst]

  • daniel_m_ww daniel_m_...
    Sternenflotten-Admiral
    0 x
    186 Beiträge
    0 Hilfreiche Beiträge
    18. 02. 2006, 12:53

    Hallo Forumler!

    Hab eine Frage. Wie kann ich ein Menü erstellen, dass die 1. Ebene anzeigt, und beim Mouseover die 2.Ebene nach unten aufklappt?

    gibt es dafür vlt irgendwo ein Tut? hab das Forum sehr intensiv durchsucht, leider nix passendes gefunden, was mich wundert, da es doch bestimmt öfters vorkommt.

    Vielleicht kann mir jemand helfen, wäre super!

    Gruß Daniel


  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    18. 02. 2006, 13:08

    Hallo,

    dazu suchst du einfach mal in google nach CSS dropdown-Menü, nimmst das CSS vom Menü und baust die Struktur mit einem TMENU nach, ideal dafür ein Listenmenü siehe FAQ

    lg georg
    PS: Ich bin gerade am Ausarbeiten von einigen Tutorials, dauert aber noch klein wenig

  • daniel_m_ww daniel_m_...
    Sternenflotten-Admiral
    0 x
    186 Beiträge
    0 Hilfreiche Beiträge
    18. 02. 2006, 13:23

    Danke für die Antwort.
    Raff ich zwar nit, aber Thema gelöst ;)

    Hab bereits ein solches Menü in CSS und JS gebaut => http://www.komparis.de ... ich hab nur keinen blassen schimmer wie ich das in Typo3 umsetzen soll.

    Ich probier mal rum, dachte es gibt dafür ne einfachere Variante als mit CSS... Danke für die Antwort!

    Schöne Grüße

    Daniel

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    18. 02. 2006, 14:15

    ok ein JSMENU gäbs noch, sorry vergessen, hab das zwar nie gebaut, sollte aber das sein was du suchst

    georg

  • daniel_m_ww daniel_m_...
    Sternenflotten-Admiral
    0 x
    186 Beiträge
    0 Hilfreiche Beiträge
    18. 02. 2006, 19:45

    Und wie kann ich so ein Menü einbauen?

  • daniel_m_ww daniel_m_...
    Sternenflotten-Admiral
    0 x
    186 Beiträge
    0 Hilfreiche Beiträge
    19. 02. 2006, 12:21

    Hi,

    so jetzt hab ich rumgetüfftelt und das kam dabei raus:

    1. # Menü einfügen
    2. OBEN = HMENU
    3. OBEN {
    4. entryLevel = 1
    5.  
    6. # Erste Menüebene (horizontaler Teil)
    7. 1 = TMENU
    8. 1 {
    9.  
    10. expAll = 1
    11. IFSUB = 1
    12. IFSUB.allWrap = <li><div id="top">|</div><ul>
    13. NO.linkWrap = <li><div id="top">|</div></li>
    14. }
    15.  
    16. # Zweite Ebene
    17. 2 = TMENU
    18. 2 {
    19. wrap = | </ul></li>
    20. expAll = 1
    21. IFSUB = 1
    22. IFSUB.allWrap = <li>|<ul>
    23. NO {
    24. linkWrap = <li>|</li>
    25. RO = 1
    26. }
    27. }
    28.  
    29. 3 < .2
    30. 4 < .2
    31. 5 < .2
    32. 6 < .2
    33. }

    Wenn ich mir den Quelltext ansehe, dann sieht das so aus wie ich es möchte. Aber ich bekomme nichts anggezeigt.

    Mein CSS sieht so aus:
    [code]/*+++++++Header mit Menülayer*/
    #head {position:relative;height: 27px;width: 492px;background-image: url(images/head.jpg);margin:0px auto; }
    .layer1 { position: absolute; top:0px; left:0px; width:492px; height:30px;}
    /*+++++++Ende Header mit Menülayer*/
    #navi { display:none;}
    .menu {position:absolute;top:0px;left:0;display:block;margin:0;padding:0;width:492px;text-align:left;}
    .menu ul{position:absolute;display:block;width:124px;margin:0;padding:0;background: url(fileadmin/images/blindgif.gif);}
    .menu li ul{visibility:hidden;}
    .menu li li ul{position:absolute;top:auto;left:auto;margin-left:124px;margin-top:-23px;}
    .menu li{list-style:none;width:124px;height:auto;display:inline;display/**/:block;float:none;float/**/:left;margin:0;padding:0;}
    * html .menu li li{display:inline;}
    .menu a {text-align:center;background: url(fileadmin/link_bg.jpg);filter:Alpha(opacity=90);border:0px #305080solid;color:#000000;font-size:11px;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;font-weight:bold;}
    .menu a:hover {background: url(fileadmin/hover_bg.jpg);border:0px #FFFFFFsolid;}
    .menu a:focus {background-color: #aaf;}
    .menu span {display:none;}
    div[id="navi"]>.menu a {text-align:center;size:12px;background: url(fileadmin/link_bg.png);border:0px #2672B9solid;color:#000000;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;}
    div[id="navi"]>.menu a:hover {border:0px #0B02AAsolid;background: url(fileadmin/hover_bg.png);}
    #content p a:link, a:visited {}
    #content a:hover {}[/code]

    Kann da keinen Fehler sehen, hab den Code bereits in anderen Seiten angewendet, ohne Typo3, da läufts prima. Und nach dem Quelltext her ist es auch richtig.

    Woran könnte dass denn liegen?
    Weiß da jemand was? Liegts am Typoscript?

    Danke für Hilfe.

    Gruß

  • steffenk steffenk
    Obi-Wan Kenobi
    0 x
    4666 Beiträge
    0 Hilfreiche Beiträge
    19. 02. 2006, 12:41

    also deine Verschachtelungen stimmen nicht

    <li> | <ul> macht keinen Sinn
    ebenso
    | </ul></li>

    Schau Dir doch mal den erzeugten Source an, das ist semantisch falsch

    <ul>
    <li>...</li>
    <li>
    <ul>
    <li>...</li>
    </ul>
    </li>
    </ul>

  • daniel_m_ww daniel_m_...
    Sternenflotten-Admiral
    0 x
    186 Beiträge
    0 Hilfreiche Beiträge
    19. 02. 2006, 13:12

    Hi,

    hm, normal stimmt, also bei mir siehts hinterher so aus:
    [code]<div id="head">
    <div class="layer1">
    <div id="navi">
    <ul id="menu">

    <li><div id="top"><a href="index.php?id=2" onfocus="blurLink(this);">Über Uns</a></div></li>

    <li><div id="top"><a href="index.php?id=3" onfocus="blurLink(this);">Standorte</a></div>
    <ul>
    <li><a href="index.php?id=21" onfocus="blurLink(this);">Bendorf</a></li>
    <li><a href="index.php?id=19" onfocus="blurLink(this);">Bischofswerda</a></li>
    <li><a href="index.php?id=20" onfocus="blurLink(this);">Chemnitz</a></li>
    <li><a href="index.php?id=15" onfocus="blurLink(this);">Dillenburg</a></li>
    <li><a href="index.php?id=17" onfocus="blurLink(this);">Gotha</a></li>
    <li><a href="index.php?id=22" onfocus="blurLink(this);">Kredenbach</a></li>
    <li><a href="index.php?id=16" onfocus="blurLink(this);">Kreuztal</a></li>
    <li><a href="index.php?id=14" onfocus="blurLink(this);">Magdeburg</a></li>
    <li><a href="index.php?id=18" onfocus="blurLink(this);">Radebeul</a></li>
    <li><a href="index.php?id=37" onfocus="blurLink(this);">Waldbröl</a></li>
    <li><a href="index.php?id=23" onfocus="blurLink(this);">Wetzlar</a></li>
    <li><a href="index.php?id=24" onfocus="blurLink(this);">Wirges</a></li>
    </ul>
    </li>

    <li>
    <div id="top"><a href="index.php?id=4" onfocus="blurLink(this);">Abteilung</a></div>
    <ul>
    <li><a href="index.php?id=11" onfocus="blurLink(this);">Junge Mode</a></li>
    <li><a href="index.php?id=42" onfocus="blurLink(this);">Damenabteilung</a></li>
    <li><a href="index.php?id=10" onfocus="blurLink(this);">Kinderabteilung</a></li>
    <li><a href="index.php?id=41" onfocus="blurLink(this);">Herrenabteilung</a></li>
    <li><a href="index.php?id=38" onfocus="blurLink(this);">Wäscheabteilung</a>
    <ul>
    <li><a href="index.php?id=13" onfocus="blurLink(this);">für Damen</a></li>
    <li><a href="index.php?id=12" onfocus="blurLink(this);">für Herren</a></li>
    <li><a href="index.php?id=40" onfocus="blurLink(this);">für Kinder</a></li>
    </ul>
    </li>

    <li><a href="index.php?id=9" onfocus="blurLink(this);">Schuhabteilung</a>
    <ul>
    <li><a href="index.php?id=36" onfocus="blurLink(this);">Damenschuhe</a></li>
    <li><a href="index.php?id=35" onfocus="blurLink(this);">Herrenschuhe</a></li>
    <li><a href="index.php?id=34" onfocus="blurLink(this);">Kinderschuhe</a></li>
    </ul>
    </li>

    <li><a href="index.php?id=43" onfocus="blurLink(this);">Heimtextilien</a></li>
    </ul>
    </li>

    <li><div id="top"><a href="index.php?id=45" onfocus="blurLink(this);">Angebote</a></div></li>

    <li><div id="top"><a href="index.php?id=39" onfocus="blurLink(this);">Newsletter</a></div></li>

    </ul>
    </div>
    </div>
    </div>[/code]

    So erstellt es der Internet Explorer, sowie der Firefox. Hab das mit meinem Code verglichen den ich normal nehme, wenn ich so ein Menü ohne Typo3 erstelle, und da passt das.

    Kann mir nicht erklären warum nichts angezeigt wird??

    Schöne Grüße

  • steffenk steffenk
    Obi-Wan Kenobi
    0 x
    4666 Beiträge
    0 Hilfreiche Beiträge
    19. 02. 2006, 13:35

    ok, dann ist der Fehler im css zu suchen, vielleicht hier ?

    #navi { display:none;}

  • daniel_m_ww daniel_m_...
    Sternenflotten-Admiral
    0 x
    186 Beiträge
    0 Hilfreiche Beiträge
    19. 02. 2006, 13:49

    Hi.

    Ja, daran lags. Dankeschön :) ... hab ich nicht dran gedacht, in Typo3 werden die Menüs ja richtig ausgegeben, normal hab ich immer nur ein Bild wo die obere Menüstruktur drin steht und nur transparente gifs trüber liegen fürs Menü, da ist das none angemessen...

    danke für die Hilfe!

    gruß Daniel