Zum Inhalt springen

H-Menu erstellen - Anfänger

Erstellt am 20. April 2007 · 12 Antworten · letzte Antwort am 23. April 2007

Tags: Frage

thE_iNviNciblE ·

Ich habe folgendes im Typscript Setup des templates hinzugefügt.
Es wird aber allem anscheind nach nicht geladen.

temp.menu_1= HMENU
   # First level menu-object, textual
   temp.menu_1.1 = TMENU
   temp.menu_1.1 {
      # Normal state properties
      NO.allWrap = <div class="menu1-level1-no"> | </div>
      # Enable active state and set properties:
      ACT = 1
      ACT.allWrap = <div class="menu1-level1-act"> | </div>
   }
# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
      # Normal state properties
      NO.allWrap = <div class="menu1-level2-no"> | </div>
      # Enable active state and set properties:
      ACT = 1
      ACT.allWrap = <dic class="menu1-level2-act"> | </div>
   }

Vielen dank

just2b ·

Hallo,

wird der Marker noch im Template angezeigt?
Wo übergibst du das temp.menu_1 dem marker/subpart?
Gibts Unterseiten zum Anzeigen?

Generell empfiehlt es sich, nicht sowas wie "_1" im Namen zu verwenden, weil die Verwirrung sehr schnell erreicht wird

georg

thE_iNviNciblE ·

Hallo,

ich habe jetzt noch ein Problem ich möchte gerne, das der aktive Menüpunkt anders formatiert wird... das geht irgendwie über ACT variable, aberi ch bekomme es nicht hin.

Mein Typoscript Setup

#Kompatibiltität Typo3 4.0
config.simulateStaticDocuments_replacementChar = _

#Erzeugen eines Pageobjekt in ?page?
page = PAGE

#Zuweisen des Sytlesheet Files 
page.stylesheet = fileadmin/my_template.css

#Typ der Seite ist 0, hiermit können verschiedene 
#Typen ausgewählt werden z.b. für eine Druckansicht
page.typeNum = 0

page.20 = TEMPLATE

#Template ist eine Datei 
page.20.template = FILE

#Der Dateiname ist template.html
page.20.template.file = fileadmin/my_template.tpl

#Den Subpart DOCUMENT BODY bearbeiten
page.20.workOnSubpart = DOCUMENT_BODY

#Innerhalb von Documtent Body weitere Subparts bearbeiten
page.20.subparts {
	#Der Subpart CONTENT wird mit 
        #der Ausgabe von styles.content.get ersetzt
	#dies entspricht der mittleren Contentspalte 
	CONTENT < styles.content.get
	
	#Der Subpart MENU ist ein hierachisches Menü 
	MENU = HMENU 

	#Die 1. Ebene des Menüs ist ein Textmenü
   	MENU.1 = TMENU
   	MENU.1 {
		NO = 1
		1.ACT < .1.NO
		1.ACT.10.fontColor = #6FA9A6
		1.ACT.15.fontColor = #6FA9A6	
		
		#Die Einträge werden umschlossen von 
                #<div class="level1"> </div> 
   		NO.allWrap = <div class="level1"> | </div> 
   	} 
   	
	#Die 2. Ebene ist ebenfalls ein Textmenü
   	MENU.2 = TMENU
   	MENU.2 {
		NO = 1
		#Die Einträge werden umschlossen 
                #von <div class="level2"> </div> 
   		NO.allWrap = <div class="level2"> | </div> 
   	} 
   	MENU.3 {
		NO = 1
		#Die Einträge werden umschlossen 
                #von <div class="level3"> </div> 
   		NO.allWrap = <div class="level3"> | </div> 
   	} 	
}

#An dieser Stelle werden die Marker 
#im Template (page.20) bearbeitet

page.20.marks{
	#Der Marker LOGO ist ein Bild
	LOGO = IMAGE

	#Die Datei für das Bild ist die 
        #Datei logo-typo3.gif
	LOGO.file = fileadmin/logo-typo3.gif
	
	#Der Marker Rootline ist ein hierachisches Menü
	ROOTLINE = HMENU
	ROOTLINE.special=rootline
	ROOTLINE.special.range= 0 | -1
	ROOTLINE.1=TMENU

	#Die einzelnen Einträge werden durch Slashes getrennt
	ROOTLINE.1.NO.allWrap= |   /   |*| |   /   |*| |
}

Mein Typo3 Template:

<html>
<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### START-->
<div id="Page">
	<div id="TopLayer">###ROOTLINE###</div>
	<div id="LogoLayer">###LOGO###</div>
	<div id="RootlineLayer"></div>
	<div id="Middle">
		<div id="Menu">
			<!-- ###MENU### START-->	
    			<a href="einfuehrung.htm">Navigationslink</a>
  			
			<!-- ###MENU### END-->
		</div>
  		<div id="Content">
			<!-- ###CONTENT### START-->
    			<h1>Willkommen zum ersten Template</h1>
    			<h2>Erstes Template.</h2>
			<p>An dieser Stelle soll später der Inhalt von Typo3 eingefügt werden....</p>
			<!-- ###CONTENT### END-->
  		</div>
	</div>
	<div id="FooterLayer"></div>
</div>
<!-- ###DOCUMENT_BODY### END-->
</body>
</html>

Meine Typo3 CSS Template Datei:

body {
    color: black; 
    background-color: rgb(170, 170, 170);
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0;
    text-align: center;  
  }

  div#Middle {
    text-align: left;    
    margin: 0 auto;     
    height: 500px;
    
  }

  div#Page {
    text-align: left;    
    margin: 0 auto;      
    width: 800px;
    padding: 0.5em;
    background-color: rgb(200, 200, 200);
  }

  html>body div#Page {
    border-color: gray; 
  }

  div#Menu {
    font-size: 9pt;
    float: left; 
    width: 200px;
    height: 100%;
    margin: 0; padding: 0;
    background-color: rgb(102, 165, 82);
  }

  div#Menu a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  div#Menu a:link {
    color: black; background-color: #eee;
  }
  div#Menu a:visited {
    color: #666; background-color: #eee;
  }
  div#Menu a:hover {
    color: black; background-color: white;
  }
  div#Menu a:active {
    color: white; background-color: red;
  }


  .level1 {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
  }

  .level2{
	margin-left: 20px;
	margin-right: 10px;
  }	
  .level3{
	margin-left: 20px;
	margin-right: 10px;
  }	  


  .menu1-level1-act {
	color: redk; background-color: green;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
  }
  .menu1-level2-act {
	color: redk; background-color: green;
	margin-left: 20px;
 	margin-right: 10px;
	font-color: red;
  }
  .menu1-level3-act {
	color: redk; background-color: green;
	margin-left: 30px;
 	margin-right: 20px;
	font-color: red;
  }

  div#Content {
    margin-left: 200px;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Content h1 {
    font-size: 1.5em;
    margin: 0 0 1em;
  }
  div#Content h2 {
    font-size: 1.2em;
    margin: 0 0 1em;
  }
  div#Content p {
    font-size:1em;
    margin: 1em 0;
  }

  div#TopLayer {
    width: 100%;
    background-color: rgb(250, 136, 0);
    height: 20px;
  }

  div#LogoLayer {
    width: 100%;
    background-color: rgb(255,255,255);
    height: 70px;
  }

  div#RootlineLayer {
    width: 100%;
    background-color: rgb(102, 165, 82);
    height: 20px;
  }

  div#FooterLayer {
    width: 100%;
    background-color: rgb(250, 136, 0);
    height: 20px;
  }
just2b ·

Hallo,

in einem TMENU gibts kein fontColor! mach einen wrap herum mit einer class="act" und dann per CSS

georg

thE_iNviNciblE ·
just2b schrieb

Hallo,

in einem TMENU gibts kein fontColor! mach einen wrap herum mit einer class="act" und dann per CSS

georg

wie ermittel ich den was aktuell ist ?

mit ACT oder ?

thE_iNviNciblE ·
just2b schrieb

ja mit ACT

georg

hab ich gemacht:

	#Der Subpart MENU ist ein hierachisches Menü 
	MENU = HMENU 
    MENU {
    	#Die 1. Ebene des Menüs ist ein Textmenü
    	1 = TMENU
    	1 {
    	
            NO = 1		
            # durchläuft alle Unterseiten
            expAll = 1 
            
            #Die Einträge werden umschlossen von 
            #<div class="level1"> </div> 
            NO.allWrap = <div class="level1"> | </div> 
               
            # Aktuelles Element formatieren 	
            ACT = 1
            ACT {
                ACT.allWrap = <div class="menu1-level1-act"> | </div>
            }		
            
            # Unterkategorie einfügen 
            IFSUB = 1
            IFSUB {
                IFSUB.allWrap = <div class="level-2">|</div>    
            }        
            
            # Jetziger Eintrag  
            CUR = 1
            CUR {
                doNotLinkIt = 1
                allWrap = <div class"menu1-level1-act">|</div>
            }   		
            
            # Jetziger Untereintrag 
            CURIFSUB = 1 
            CURIFSUB {
                doNotLinkIt = 1
                allWrap = <div class="menu1-level1-act_sub">|</div>
            }            
   	    }
   	    
      2 < .1
      3 < .1
      4 < .1   	    
   	}

hmpf klappt noch nich ganz...

was macht ich den, wenn ich ein horizentales menü möchte ?

just2b ·

Es gibt kein ACT.ACT.allWrap, genausowenig gibt es ein IFSUB.IFSUB.allWrap

für ein horizontales änderst du einfach dein CSS

georg

just2b ·

Ja es heißt trotzdem ACT.allWrap = ....

thE_iNviNciblE schrieb

Horizontales Menü
ja, aber bei unterpunkten wird es schwierig, da wollte ich es jetzt mit GMENU machen... aber ich scheitere...

der code ist leider etwas unsichtbar, ich nehme also an du willst keine Hilfe dazu?
2 = GMENU
...

georg

thE_iNviNciblE ·
just2b schrieb

Ja es heißt trotzdem ACT.allWrap = ....

thE_iNviNciblE schrieb

Horizontales Menü
ja, aber bei unterpunkten wird es schwierig, da wollte ich es jetzt mit GMENU machen... aber ich scheitere...

der code ist leider etwas unsichtbar, ich nehme also an du willst keine Hilfe dazu?
2 = GMENU
...

georg

Hi just2b,

ok, ich werde den code ändern, ist anscheind wirklich falsch!
Danke :-)

ich dachte an das hier

http://www.typo3wizard.com/de/snippets/menus/grafisches-menu-gmenu.html

würde das vom prinzip her gehen ?

thE_iNviNciblE ·
just2b schrieb

natürlich würde das gehen

georg

also ich dachte es wird etwas realisiert

1MenüPunkt 2MenüPunkt
- punkt1 - punkt1
- punkt2 - punkt2
- punkt3 - punkt3

page = PAGE
page.typeNum = 0
page.config.doctype = xhtml_trans
page.config.index_enable = 1
page.headerData.1 = TEXT
page.headerData.1.value = <link rel="stylesheet" type="text/css" href="fileadmin/gmenu.css" />

page.30 = TEMPLATE
page.30 {
template = FILE
template.file = fileadmin/gmenu.tpl

workOnSubpart = document
subparts.sub_content.select.orderBy = sorting
subparts.content < styles.content.get
subparts.nav = HMENU
subparts.nav.1 = GMENU
subparts.nav.1 {
  expAll = 1
  wrap =  |
  NO {
XY = 130,30
5 = IMAGE
#5.file = fileadmin/nav_bg.gif
10 = TEXT
10.text.field = title
10.fontFile = fileadmin/fonts/georgiab.ttf 
10.fontSize = 13
# offset bestimmt die vertikale Ausrichtung der Schrift
10.offset = 0,22
10.fontColor = #8B7F57
10.align = center
10.before.cObject = TEXT
10.before.cObject.field = uid
# in der folgenden Zeile wird der Seitentitel als title-Tag in den Link hinein
#generiert
10.before.cObject.dataWrap = <a href="index.php?id=|"  title="{field:title}">
 }

# hier wird der aktive Menüpunkt definiert, es wird alles von NO
#(Normalzustand) übernommen, nur die Grafik, Schriftfarbe und Position der
#Schrift wird verändert  
  ACT < .NO
  ACT = 1
  ACT {
#5.file = fileadmin/nav_bg_act.gif
10.fontColor = #61583A
10.offset = 0,24
}
# hier wird der Mouseover Zustand der nicht aktiven Menüpunkte definiert, es
#wird alles von NO (Normalzustand) übernommen, nur die Grafik und
#die Schriftfarbe wird verändert 
  RO < .NO
  RO = 1
  RO {
#5.file = fileadmin/nav_bg_hover.gif
10.fontColor = #61583A
}
}

das ist irgendwie nicht richtig so. .. #paralyzed#