Zum Inhalt springen

Vorhandenem Menü eine 2. und 3. Ebene geben?

Erstellt am 26. April 2009 · 3 Antworten · letzte Antwort am 27. April 2009

Tags: Frage

jschuhma ·

Hallo miteinander,

ich bin gerade dabei dieses Menü zu realisieren (http://www.janschuhmacher.info/temp/menu/)
Die erste Ebene habe ich jetzt hinbekommen, mein Code lautet wie folgt:

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
 wrap = <div id="ebene01"> | </div>
 1 = TMENU
 1 {
  wrap = <ul> | </ul>
   NO = 1
   NO.wrapItemAndSub = <li> | </li>
   ACT = 1
   ACT < .NO
   ACT.ATagPatams = id=current
   }
}

Das funktioniert perfekt, auch alle CSS-Angaben werden korrekt angezeigt.
Ich weiß jetzt nur nicht wie ich meine 2. Menüebene einfügen muss?

Im Template sind sie wie folgt aufgebaut:

<div id="menu">	
<!-- ###HAUPT_NAVI### start-->
<div id="navibereich">
   <ul id="ebene01">
      <li id="navi01"><a href="index.html"><strong>Home</strong></a></li>
      <li id="navi02"><a href="#"><strong>Technik</strong></a>
         <ul class="ebene02">
            <li id="navi0201"><a href="#">Kamera</a>
               <ul class="ebene0201">
                  <li id="nav020101"><a href="#">Funktionsweise</a></li>
                  <li id="nav020102"><a href="#">Kameratypen</a></li>
               </ul>
            </li>   
            <li id="navi0202"><a href="#">Objektiv</a>
               <ul class="ebene0202">
                  <li id="nav020201"><a href="#">Funktionsweise</a></li>
                  <li id="nav020202"><a href="#">Kameratypen</a></li>
               </ul>
            </li>   
            <li id="navi0203"><a href="#">Sonstiges Equipment</a>
               <ul class="ebene0203">
                  <li id="nav020301"><a href="#">Blitz</a></li>
                  <li id="nav020302"><a href="#">Stativ</a></li>
                  <li id="nav020303"><a href="#">Filter</a></li>
                  <li id="nav020304"><a href="#">Streulichtblenden</a></li>
               </ul>
            </li>
            <li id="navi0204"><a href="#">Kaufberatung</a></li>
            <li id="navi0205"><a href="#">Geschichte</a></li>
         </ul>
      </li>
         
      <li id="navi03"><a href="#"><strong>Bildgestaltung</strong></a>
         <ul class="ebene02">
            <li id="navi0301"><a href="#">Grafische Grundlagen</a>
               <ul class="ebene0301">
                  <li id="nav030101"><a href="#">Blickrichtung</a></li>
                  <li id="nav030102"><a href="#">Gestaltungselemente</a></li>
                  <li id="nav030103"><a href="#">Bildaufteilung</a></li>
                  <li id="nav030104"><a href="#">Bildstil</a></li>
                  <li id="nav030105"><a href="#">Farbgestaltung</a></li>
               </ul>
            </li>   
            <li id="navi0302"><a href="#">Licht</a>
               <ul class="ebene0302">
                  <li id="nav030201"><a href="#">Was ist Licht?</a></li>
                  <li id="nav030202"><a href="#">Lichtarten</a></li>
                  <li id="nav030203"><a href="#">Lichtkontrolle</a></li>
                  <li id="nav030204"><a href="#">Lichtgestaltung</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li id="navi04"><a href="#"><strong>Bildnachbearbeitung</strong></a>
         <ul class="ebene02">
            <li id="navi0401"><a href="#">Basics</a>
               <ul class="ebene0401">
                  <li id="nav040101"><a href="#">Freistellen &amp; Drehen</a></li>
                  <li id="nav040102"><a href="#">Tonwertkorrektur</a></li>
                  <li id="nav040103"><a href="#">Abwedeln/Nachbelichten</a></li>
                  <li id="nav040104"><a href="#">Staub &amp; Störungen</a></li>
                  <li id="nav040105"><a href="#">Scharfzeichnen</a></li>
                  <li id="nav040106"><a href="#">Weichzeichnen</a></li>
                  <li id="nav040107"><a href="#">Bildgröße &amp; Verzerren</a></li>
                  <li id="nav040108"><a href="#">Farbbalance</a></li>
                  <li id="nav040109"><a href="#">Farbkorrektur</a></li>
                  <li id="nav0401010"><a href="#">Graditionskurve</a></li>
               </ul>
            </li>   
            <li id="navi0402"><a href="#">Software</a>
               <ul class="ebene0402">
                  <li id="nav040201"><a href="#">Photoshop</a></li>
                  <li id="nav040202"><a href="#">Lightroom</a></li>
                  <li id="nav040203"><a href="#">Aperture</a></li>
                  <li id="nav040204"><a href="#">Sonstige</a></li>
               </ul>
            </li>   
            <li id="navi0403"><a href="#">Archivierung</a>
               <ul class="ebene0403">
                  <li id="nav040301"><a href="#">Datentiefe &amp; Farbe</a></li>
                  <li id="nav040302"><a href="#">Dateiformat</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li id="navi05"><a href="#"><strong>Praxis</strong></a>
         <ul class="ebene02">
            <li id="navi0501"><a href="#">Inspiration</a></li>   
            <li id="navi0502"><a href="#">Workshop</a>
               <ul class="ebene0502">
                  <li id="nav050201"><a href="#">Licht</a></li>
                  <li id="nav050202"><a href="#">Schwarz/Weiß</a></li>
                  <li id="nav050203"><a href="#">HDR</a></li>
                  <li id="nav050204"><a href="#">Makro</a></li>
                  <li id="nav050205"><a href="#">Landschaft/Panorama</a></li>
                  <li id="nav050206"><a href="#">Nacht</a></li>
                  <li id="nav050207"><a href="#">Portrait</a></li>
               </ul>
            </li>   
      	</ul>      
      </li>
      <li id="navi06"><a href="#"><strong>Hochschule</strong></a>
         <ul class="ebene02">
            <li id="navi0601"><a href="#">Skripte</a></li>   
            <li id="navi0602"><a href="#">Studentische Arbeiten</a></li>   
      	</ul> 
      </li>
      
      <li id="navi07"><a href="#"><strong>Glossar</strong></a></li>
   </ul>
</div> 
<!-- ###HAUPT_NAVI### stop-->

Kann mir hier evtl jemand weiterhelfen?

Grüße Jan

(crosspost bei http://www.typo3forum.net)

Unbekannter Benutzer ·

Erstmal ist schon nen Fehler drinn:

ATagPatams gibts nicht. Es heißt ATagParams Das ACT = 1 ist überflüssig. Classen und Id's werden mit Anführungszeichen eingefasst.

Ansonsten erstellst du die zweite und dritte ebene genauso wie die erste.

So ist es korrekt:

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
	wrap = <div id="ebene01">|</div>
	1 = TMENU
	1 {
		wrap = <ul>|</ul>
		NO = 1
		NO.wrapItemAndSub = <li>|</li>
		ACT < .NO
		ACT.ATagParams = id="current"
	}
	2 < .1
	3 < .1
}

Hier wird kopiert: 2 < .1 und hier 3 < .1 (Die 1. auf die zweite Ebene und die 1 auf die dritte) Sollte sich was ändern, dann kopierst du dennoch und füllst mit den Änderungen auf. Etwa so:

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
	wrap = <div id="ebene01">|</div>
	1 = TMENU
	1 {
		wrap = <ul>|</ul>
		NO = 1
		NO.wrapItemAndSub = <li>|</li>
		ACT < .NO
		ACT.ATagParams = id="current"
	}
	2 < .1
	2 {
		NO.wrapItemAndSub = <li class="ebene2">|</li>
		ACT.ATagParams = id="current_ebene2"
	}
	3 < .1
	3 {
		NO.wrapItemAndSub = <li class="ebene3">|</li>
		ACT.ATagParams = id="current_ebene3"
	}
}
jschuhma ·

Vielen Dank für deine Antwort, das bringt mich ein gutes Stück weiter!
Aktuell (mit T3) ist es jetzt so, dass ich erst auf "Technik" klicken muss, dann bin ich im Bereich Technik, erst jetzt funktioniert aber die 2. Menüebene wenn ich einen Hover über Technik mache.

Ist es möglich, dass man nicht erst klicken muss und eine neue Seite aufgerufen wird, sondern das Untermenü direkt beim over erscheint?

Liegt es evtl daran, wie ich die Struktur angelegt habe?
Bild: janschuhmacher.info/…/struktur.png

ich habe deinen code jetzt etwas abgeändert

tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
        wrap = <div id="ebene01">|</div>
        1 = TMENU
        1 {
                wrap = <ul>|</ul>
                NO = 1
                NO.wrapItemAndSub = <li>|</li>
                ACT < .NO
                ACT.ATagParams = id="current"
        }
        2 < .1
        2 {
                NO.wrapItemAndSub = <ul class="ebene02">|</ul>
                ACT.ATagParams = id="current_ebene2"
        }
        3 < .1
        3 {
                NO.wrapItemAndSub = <li class="ebene3">|</li>
                ACT.ATagParams = id="current_ebene3"
        }
}

Jetzt wird ebene 2 direkt beim Hover sichtbar, aber komischerweise sind nur 2 Punkte "halb"-sichtbar... als wären alle überlagert?

Bild: janschuhmacher.info/…/menu_fehler.png