Zum Inhalt springen

Horizontales Menü, 2. Ebene erscheint nicht bei RO

Erstellt am 13. April 2011 · 3 Antworten · letzte Antwort am 17. April 2011

Tags: Frage

luho ·

Hallo Typo3-Experten,
ich realisiere zur Zeit mein erstes eigenes Typo3 Projekt. Leider komme ich bei der Umsetzung eines horizontalen Menüs nicht weiter. Ich bin wie in der HowTo, welche sich in diesem Forum befindet vorgegangen.
Die erste Menüebene erscheint auch. Leider klappt die 2. Ebene bei Rollover nicht auf.
Ich finde einfach den Fehler nicht und würde mich freuen, wenn mir jemand helfen könnte. Da das Menü ja vielfach erprobt ist, wird mein Problem nicht in der Menüdefinition zu finden sein (denke ich :o). Deshalb füge ich mal mein komplettes TS, CSS und HTML Template bei.
Hier mein TS:

seite = PAGE
seite.stylesheet = fileadmin/templates/css/style.css
seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
seite.10 = TEMPLATE
seite.10 {
      template = FILE
      template.file = fileadmin/templates/main_templ.html
      workOnSubpart = DOKUMENT
      marks.INHALT < styles.content.get

marks.MENUE= HMENU
marks.MENUE {
 
  1=GMENU
  1 {
    expAll = 1
    noBlur = 1
 
    NO = 1    
    NO {
      transparentBackground = 1
      ATagTitle.field = title
      XY=[10.w]+10,24
 
      5 = IMAGE
      5.file = fileadmin/templates/img/released.gif    
 
      10=TEXT
      10 {
        text.field=title
        offset=1,20
        fontColor=#FFFFFF
        fontFile=fileadmin/templates/fonts/arial.ttf
        fontSize=10   
      }
    }
    ACT <.NO
    ACT.10.fontColor = #BF2236
 
    RO <.NO
    RO.10.fontColor = #BF2236
 
    ACTRO <.RO
  }
}
  
        marks.PFAD = HMENU
        marks.PFAD {
            special = rootline
            special.range = 0 | -1
            1 = TMENU
            1 {
                  NO {
                     allWrap =   /   |
                     }
               }
        }
  
        marks.INHALT_SIDE = CONTENT    
        marks.INHALT_SIDE  < styles.content.getRight
        
  
  
        marks.ADR = CONTENT
        marks.ADR < styles.content.getBorder
  
        marks.OPEN = CONTENT
        marks.OPEN < styles.content.getLeft
}

Und hier mein CSS:

body{
  text-align:center;/*Zentrierung für Internet Explorer*/
}

#site{
  text-align:left;/*Zentrierung zurücksetzen*/
  margin: 15px auto; /*Zentrierung nach Standard (bleibt beim IE wirkungslos)*/
  /* border: 15px solid white; */
  height: 630px;
  width: 900px;
  font: 12px Arial, Helvetica, sans-serif;
}

#mainbar{
  /* border: 2px solid red;*/
  margin: 2px;
  width: 606px;
  float: left;
  height: 518px;
}

#meta{
  /* border: 2px solid magenta; */
  margin: 2px;
  height: 160px;
}

#logo{
  /* border: 2px solid green; */
  margin: 2px;
  width: 342px;
  height: 156px;
  float: left;
}

#info{
  /* border: 2px solid yellow; */
  margin: 2px;
  height: 156px;
  float: left;
  margin-left: 346px;
  margin-top: -160px;
}

#open{
  /* border: 2px solid yellow; */
  margin: 2px;
  margin-right: 15px;
  height: 100px;
  float: right;
  text-align: right;
}

#search{
  /* border: 2px solid yellow; */
  margin: 2px;
  margin-top: 7px;
  height: 48px;
  width: 252px;
  float: right;
  text-align: right;
}


#navi{
  /* border: 2px solid red; */
  margin: 2px;
  width: 606px;
  float: left;
  height: 30px;
}

/* MENU */
#menu ul {
padding:7px 0 0 0px;
}

#menu ul li {
text-align: center;
float: left;
list-style:none;
padding:0 10px;
}

#menu ul li .caption a, #menu ul li .caption a:link, #menu ul li .caption a:visited, #menu ul li .caption a:active {
color:#333;
text-decoration:none;
font-weight:bold;
font-size:15px;
}

#menu ul li .caption-act a, #menu ul li .caption-act a:link, #menu ul li .caption-act a:visited, #menu ul li .caption-act a:active {
text-decoration:none;
font-weight:bold;
font-size:15px;
color: #D01F3C;
}



#path{
  /* border: 2px solid red; */
  margin: 2px;
  width: 606px;
  float: left;
  height: 23px;
}

#sidebar{
  /* border: 2px solid blue; */
  margin: 2px;
  height: 518px;
  margin-left: 610px;
}   

#adr{
  /* border: 4px solid blue; */
  margin: 4px;
  height: 100px;
  text-align: right;
}

#side{
  /* border: 2px solid red; */
  float: right;
  margin: 2px;
  height: 410px;
}      

#footer{
  border: 2px solid black;
  /* margin: 2px; */
  background-color: #000000;
  color: white;
  height: 104px;
  margin-top: 0px;
}

Hier auch noch mein HTML Template:

<html>
<head>
<title>Foerderverein</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>

###DOKUMENT###

  <div id="site">
    <div id="mainbar">
    	<div id="meta">
    		<div id="logo"><a href="http://foerderverein.de"><img src="fileadmin/templates/img/logo.png" align"absmiddle" border="0"/></a></div>
    	   <div id="info">
    			<div id="open">###OPEN###</div>    	   
    			<div id="search">Suchen: <input name="tx_indexedsearch[sword]" type="text" size="10" class="formular"/> 
<input name="goButton" class="formular" style="position:relative;top:3px" type="image" src="fileadmin/templates/img/suchenlupe2.gif" />
</div>
    		</div>   	
    	</div>   	
    	<div id="navi">###MENUE###</div>    	
    	<div id="path">###PFAD###</div>     
    	<div id="cont">###INHALT###</div>
    </div>  
    <div id="sidebar">
       <div id="adr">###ADR###</div>
       <div id="side">###INHALT_SIDE###</div>
    </div>
    <div id="footer">
    Hier steht die Fusszeile 1...
    </div>   
  </div>
  
###DOKUMENT###

</body>
</html>
luho ·

Kann mir wirklich niemand helfen? Oder habe ich mein Problem zu Umständlich geschildert?

igorshmigor ·

Ein Link zum verwendeten HowTo wäre hilfreich gewesen, um zu sehen, ob es überhaupt für Deine Zwecke geeignet war und wo die Unterschiede liegen.
Das TypoScript, das Du verwendest hat jedenfalls gar keine zweite Ebene.
Du definierst das Menü hier:

marks.MENUE {
  1=GMENU
 ...

mit 1=GMENU wird festgelegt, dass die erste Ebene als grafisches Menü erstellt werden soll.
Aber es wird keine zweite Ebene definiert. Es müsst später noch so etwas folgen wie 2=GMENU oder 2=TMENU oder 2<.1 . Irgendsowas. Aber da ist ja gar nichts. Daher kann auch keine 2. Ebene erscheinen. Oder meinst Du gar keine Menüebene? Meinst Du bloß, dass sich die Farbe des Menüpunktes bei Roll-Over nicht ändert? Denn das ist ja das einzige, was Du für den Roll-Over definiert hast.

luho ·

vielen Dank für die Antwort. Das Menübeispiel habe ich aus dieser Rubrik und kann über diesen Link erreicht werden:
#65143
Du hast natürlich recht. Es liegt mit Sicherheit an meiner geringen Erfahrung mit TS: die zweite Ebene habe ich tatsächlich nicht definiert. Wenn ich aber

2 < .1

oder

2 = GMENU

oder

2 = TMENU

einfüge, erscheint die zweite Ebene trotzdem nicht.

Ich möchte gerne, dass meine 2.Ebene beim RO über den Knopf der 1.Ebene erscheint und nach dem darüber Hinwegbewegen wieder verschwindet. Wenn man eine Seite der 2.Ebene anklickt, soll die 2. Menüebene auch verschwinden und nur durch RO über den Knopf der 1.Ebene wieder sichtbar werden. Dieser Link zeigt wie ich es gerne hätte:
http://www.just2b.com/mein-typo3/css-ts-menues/horizontales-dropdown-menue/beispiel.html
Der in diesem Beispiel gezeigte Code funktioniert bei mir allerdings nicht und ich verstehe absolut nicht warum.
Obwohl ich das Buch "Einstieg in Typo3 4.0" durchgearbeitet habe, habe ich keine Ahnung wie man sowas macht :o .

Vielen Dank für jede Hilfe!