Zum Inhalt springen

Dropdown Menu will nicht

Erstellt am 4. Januar 2011 · 7 Antworten · letzte Antwort am 12. Januar 2011

Tags: Frage

TheJoker ·

Moin Moin!

Zu aller erst muss ich sagen, dass ich ein Anfänger bin, was Typo3 anbelangt. Ich hab es jedoch mit viel Googlen doch noch zu einem gewissen Punkt gebracht.

Nun macht aber das Menu net das was es soll. Genauergesagt zeigt es mir einfach nur eine Liste an, nicht jedoch das Menu so wie ich es wollte.
Es ist ein Reines CSS Menu.

### Menü ###
subparts.menu = HMENU
subparts.menu {
###Erste Ebene###
1 = TMENU
    1 {
      wrap = <ul class="menu">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li>|</li>
      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
}
### Zweite Ebene ###
    2 = TMENU
    2 {
      wrap = <ul>|</ul>
      NO.allWrap = <li>|</li>

Soweit zum Typoscript für das Menu. Das CSS habe ich auch da eingebunden, diese Einbindung funktioniert allerdings.

.bg {background: url(images/bg.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#EB8798 url(images/bg_menu.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/bg.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/bg.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/bga.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/bg.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/bg.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/bga.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #EB8798; padding:3px 0; border:1px solid #99182D; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #EB8798; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#EB8798 url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#99182D; color:#EB8798;}
.menu :hover ul.sub li a.fly:hover {background:#99182D url(images/arrow_over.gif) 80px 7px no-repeat; color:#EB8798;}
.menu :hover ul li:hover > a.fly {background:#99182D url(images/arrow_over.gif) 80px 7px no-repeat; color:#EB8798;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #EB8798; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

Und vlt hilft euch der Menuteil des HTML-Templates noch weiter^^

<!-- ###menu### begin -->
<ul class="menu">
<li class="top">
	<a href="index.php?id=2" target="_self" 	class="top_link"><span>Menupunkt1</span></a>
</li>
<li class="top">
	<a href="" target="_self" class="top_link"><span>Menupunkt2</span></a>
	<ul class="sub">
	<li><a href="index.php?id=11" target="_self">Untermenu1</a></li>
	<li><a href="index.php?id=12" target="_self">Untermenu2</a></li>
	<li><a href="index.php?id=13" target="_self">Untermenu3</a></li>
	</ul>
</li>
</ul>
<!-- ###menu###end -->

Ich hoffe, ich hab mich versändlich genug ausgedrückt^^

Danke schon im Voraus für eure Hilfe
lg
Joker

hwt ·

Hi,

und willkommen in der Typo3-Community!

Was macht denn das Menü und was sollte es machen? Eine genauere Problembeschreibung wäre schon gut, wenn wir dir effektiv helfen sollen.

Dein CSS scheint mir allerdings so schonmal optimierungsfähig. Zwei Ebenen und so viele Verschachtelungen?

Mfg!

TheJoker ·

Hi

Erstmal danke für deine Antwort!

Also das Menu sollte ein einfaches horizontales Menu sein, bei dem bei einem Hover ein Untermenu rauskommt.
So à la www.cssplay.co.uk. Leider zeigt es mir in meinem Menudiv nur eine normale Liste an. Und das mein CSS verbesserungswürdig is glaub ich dir aufs wort. DAs CSS ist das Ergebnis von Google und Unwissenheit 😃

In einem normalen HTML-File (nicht Typo3) wird es allerdings richtig dargestellt.

So ich hoffe ich hab das Problem ein bisschen ausführlicher beschrieben als vorhin.

Gruss Joker

hwt ·

Ok, das bringt schonmal etwas Licht in die Sache. Aber dann wäre es hilfreich die Ausgabe der Seite zu sehen. Hast du nen Link? Kannste auch per PN schicken.

Zum CSS schau dir bitte nochmal die Muster-Datei von cssplay an.

Mfg!

TheJoker ·

So nun ist ein neues Problem mit dem Menu aufgetaucht. Ich wollte keinen neuen Thread erstellen, daher füge ich es hier an.

Ich habe die Website komplett erstellt auf der lokalen Dummypage von Typo3. Nachdem ich die Seite auf einem Webserver nochmals erstellt hatte(TS,CSS und HTML-Template sind identisch wie Lokal) wird der Subpart nicht mehr erstetzt. Ich habe schon danach gegooglet, hat allerdings nichts gebracht.

<div id="menu">
<!-- ###menu### begin -->
<ul class="menu">
 <li class="link"><a href="#" class="link"><span>E1 P1</span></a></li>
 <li class="link" onmouseover="show(this)" onmouseout="hide(this)">
  <a href="#"><span>E1 P2</span></a>
  <ul class="submenu" onmouseover="show(this)" onmouseout="hide(this)" >
  <li class="link"><a href="#"><span>E2 P1</span></a></li>
  <li class="link"><a href="#"><span>E2 P2</span></a></li>
  <li class="active"  class="link"><a href="#"><span>E2 P3</span></a></li>
 </ul>
 </li>
 <li class="link"><a href="#"><span>E1a P3</span></a></li>
</ul>
<!-- ###menu### end -->
</div>

### Menü ###
subparts.menu = HMENU
subparts.menu {
  ### Erste Ebene ###
    1 = TMENU
    1 {
      wrap = <ul class="menu">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>             
      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
    }
    ### Zweite Ebene ###
    2 = TMENU
    2 {
      wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
      NO.allWrap = <li>|</li>
    }
}

Das CSS hänge ich mal nicht an, ich denke nicht, dass es sonderlich viel beitragen würde. Ansonsten einnfach melden.

Ich hoffe Ihr könnt mir auch dieses mal helfen.

lg Joker