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
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
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
Und wie kann ich so ein Menü einbauen?
Hi,
so jetzt hab ich rumgetüfftelt und das kam dabei raus:
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ß
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
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
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
