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 => 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
ok ein JSMENU gäbs noch, sorry vergessen, hab das zwar nie gebaut, sollte aber das sein was du suchst
georg
Und wie kann ich so ein Menü einbauen?
Hi,
so jetzt hab ich rumgetüfftelt und das kam dabei raus:
# Menü einfügen
OBEN = HMENU
OBEN {
entryLevel = 1
# Erste Menüebene (horizontaler Teil)
1 = TMENU
1 {
expAll = 1
IFSUB = 1
IFSUB.allWrap = <li><div id="top">|</div><ul>
NO.linkWrap = <li><div id="top">|</div></li>
}
# Zweite Ebene
2 = TMENU
2 {
wrap = | </ul></li>
expAll = 1
IFSUB = 1
IFSUB.allWrap = <li>|<ul>
NO {
linkWrap = <li>|</li>
RO = 1
}
}
3 < .2
4 < .2
5 < .2
6 < .2
}
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:
/*+++++++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 {}
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
<ul>
<li>...</li>
<li>
<ul>
<li>...</li>
</ul>
</li>
</ul>
Hi,
hm, normal stimmt, also bei mir siehts hinterher so aus:
<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>
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
ok, dann ist der Fehler im css zu suchen, vielleicht hier ?
#navi { display:none;}
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
hallo
ich hätte auch eine frage bezüglich solchen aufklappmenüs. bei mir wird nämlich gar nichts angezeigt.
p = PAGE
p.typeNum = 0
p.bodyTag = <body>
p.stylesheet = fileadmin/style.css
p.10 = TEMPLATE
p.10 {
template = FILE
template.file = fileadmin/vorlage.html
workOnSubpart = DOKUMENT
marks.INHALT < styles.content.get
marks.MENU = HMENU
marks.MENU {
entryLevel = 0
# Erste Menüebene
1 = TMENU
1 {
wrap = <ul id="menu">|</ul>
expAll = 1
#IFSUB = 1
IFSUB.allWrap = <li><div id="top">|</div><ul>
NO.linkWrap = <li><div id="top">|</div></li>
}
# Zweite Ebene (vertikaler Teil)
2 = TMENU
2 {
wrap = | </ul></li>
expAll = 1
IFSUB = 1
IFSUB.allWrap = <li>|<ul>
NO {
linkWrap = <li>|</li>
RO = 1
}
}
}
bei dem css dürften eigentlich keine fehler sein, denn wenn ich es nur mit einer html-seite teste passt alles.
ich weiß leider gar nicht mehr weiter und wär für jede hilfe sehr dankbar.
lg
anna
@sees.
Such in Forum nach ypmenu...
Armin
Danke - werd ich machen.
Also bei mir funktioniert das. Hast du die Javascript Dateien in dein Typo3 Projekt eingebunden. Hatte am anfang auch nur im Template ohne Typo3 einbindung getest, da hab ich die Verknüpfungen zu den Js Dateien im head gehabt, aber Typo nimmt ja nur den Body bereich, also wozwischen die Marker sind, da müsste als manuell im Setup deiner Typo3 seite die 2 Javascript dateien eingebunden werden.
Vlt lags ja daran.
gruß