• Forum
• TYPO3 CMS: TypoScript
• Menüs
• Menuumsetzung (TMENU)

Menuumsetzung (TMENU) [Gelöst]

• scorp
  Padawan

  0 x

  44	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  07. 12. 2006, 12:54

  SChönen guten tag TYPO3 Family,

  ich muss eine neue Seite in TYPO3 umsetzen, nur hat diese nun ein neuen Menuaufbau.

  http://www.stm-ackerstrasse.de/endversion_2006-11-21.html

  Seht ihr wie es aussieht wenn ein Hauptpunkt aktiv ist und wie es aussehen soll wenn das submenu offen is + der aktive unterpunkt dort.

  Mein Problem ist, der Kollege hat das Template und CSS so gemacht, das die class Definitonen für den <a>-Tag gelten.

  Wie kann ich es bewerkstelligen das typo3 dem jeweiligen Link die bestimmte Class zuweisen tut? Hoffentlich geht das :D

  also ich wollte schon ,wie das beim Template building ist mit <div>-Container versuchen.Klappte nur nicht so ganz.Dann wollte ich den <li>-Tag einfach die classen mitgeben.Er hat dann die Punkte ,statt in einer Reihe auszugeben, mit abständen versehen.War glaube der Abstand vom aktiven submenupunkt.

  Ich geb euch mal den html code und ts code.

  [TS]tmp.LEFTMENU = HMENU
  tmp.LEFTMENU {
  wrap = <div id="leftMenu"> | </div>
  special = directory
  special.value = 3
  1 = TMENU
  1 {
  wrap = <ul> | </ul>
  NO = 1
  NO.wrapItemAndSub = <li> | </li>
  ACT = 1
  ACT < .NO
  ACT.ATagParams = id=current
  }
  }
  [/TS]

  [HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <HTML>
  <HEAD><!-- ###DOCUMENT_HEADER### begin -->
  <TITLE>Stadtteilmanagement Ackerstra&szlig;e Nord</TITLE>
  <META http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <META http-equiv="content-language" content="de">
  <META name="robots" content="index,follow">
  <META name="description" content="Stadtteilmanagement Ackerstra&szlig;e Nord">
  <LINK rel="stylesheet" type="text/css" media="screen" href="/uploads/tf/screen.css">
  <!--###DOCUMENT_HEADER### end --></HEAD>
  <BODY>
  <!--###DOCUMENT_BODY### begin -->
  <DIV id="paper">
  <DIV id="header">

  <!-- ###TOP_NAVI### begin -->
  <DIV id="headMenu">
  <ul>
  <li><A href="#">Home</A></li>
  <li><IMG class="separator" src="images/separator.gif" alt=""><li>
  <li><A href="#">Kontakt</A></li>
  <li><IMG class="separator" src="images/separator.gif" alt=""><li>
  <li><A href="#">Impressum</A></li>
  <li><IMG class="separator" src="images/separator.gif" alt=""><li>
  <li><A href="#">Suche</A></li>
  </ul>
  </DIV>
  <!-- ###TOP_NAVI### end -->

  </DIV>

  <DIV id="printHead">
  <B>Stadtteilmanagement Ackerstra&szlig;e Nord</B> - Stadtteilleben - Bildung
  </DIV>

  <DIV id="main">

  <!-- ###HAUPT_NAVI### begin -->
  <DIV id="mainLeft">
  <DIV id="leftMenu">
  <ul>
  <li><A class="off1" href="#">Veranstaltungskalender</A></li>
  <li><A class="off1" href="#">Stadtteilmanagement</A></li>
  <li><A class="off1" href="#">Projekte</A></li>
  <li><A class="on1" href="#">Stadtteilleben</A></li>
  <li><A class="off2" href="#">Gebietsinformationen</A></li>
  <li><A class="on2" href="#">Bildung</A></li>
  <li><A class="off2" href="#">Besch&auml;ftigung</A></li>
  <li><A class="off2" href="#">Gewerbe</A></li>
  <li><A class="off2" href="#">Freizeit</A></li>
  <li><A class="off2" href="#">Kultur</A></li>
  <li><A class="off1" href="#">Archiv</A></li>
  <li><A class="off1" href="#">Links</A></li>
  </ul>
  <DIV class="menuSpace">&nbsp;</DIV>
  </DIV>

  </DIV>
  <!-- ###HAUPT_NAVI### end -->

  <DIV id="mainMiddle">
  &nbsp;
  </DIV>

  <DIV id="mainRight">
  <DIV id="content">
  ###CONTENT###
  </DIV>
  </DIV>

  </DIV>

  <!-- ###FOOTER### begin -->
  <DIV class="utilityRow">
  <DIV class="utilityRowLeft"><A href="#" onClick="history.back(); return false;">zur&uuml;ck</A></DIV>
  <DIV class="utilityRowRight"><A class="nachoben" href="#">nach oben</A></DIV>
  </DIV>
  <!-- ###FOOTER### end -->

  </DIV>
  <br>
  <!--###DOCUMENT_BODY### end -->
  </BODY>
  </HTML>
  [/HTML]

  Und hier die Classen die für das Menu gedacht sind.

  [HTML]/*******************/
  /* MainMenü */
  /*******************/

  A.off1, A.off1:visited {
  float: left;
  display: block;
  width: 150px;
  line-height: 14px;
  padding: 0px 0px 1px 12px;
  font-size: 10px;
  margin-top: 7px;
  margin-bottom: 2px;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  }

  A.off1:hover, A.off1:active {
  color: #DA0006;
  background: #ffffff url(/uploads/tf/active1.gif) no-repeat;
  text-decoration: none;
  }

  A.on1, A.on1:visited {
  float: left;
  display: block;
  width: 150px;
  line-height: 14px;
  padding: 0px 0px 1px 12px;
  font-size: 10px;
  margin-top: 7px;
  margin-bottom: 2px;
  font-weight: bold;
  color: #DA0006;
  background: #ffffff url(/uploads/tf/active1.gif) no-repeat;
  text-decoration: none;
  }

  A.on1:hover, A.on1:active {
  color: #DA0006;
  background: #ffffff url(/uploads/tf/active1.gif) no-repeat;
  text-decoration: none;
  }

  /*******************/
  /* SubMenü */
  /*******************/

  A.off2, A.off2:visited {
  float: left;
  display: block;
  width: 134px;
  font-weight: normal;
  font-size: 9px;
  line-height: 10px;
  padding: 2px 0px 3px 28px;
  margin-top: 1px;
  margin-bottom: 2px;
  color: #FFFFFF;
  text-decoration: none;
  }

  A.off2:hover, A.off2:active {
  color: #DA0006;
  background: #ffffff url(/uploads/tf/active2.gif) no-repeat;
  text-decoration: none;
  }

  A.on2, A.on2:visited {
  float: left;
  display: block;
  width: 134px;
  font-weight: normal;
  font-size: 9px;
  line-height: 10px;
  padding: 2px 0px 3px 28px;
  margin-top: 1px;
  margin-bottom: 2px;
  color: #DA0006;
  background: #ffffff url(/uploads/tf/active2.gif) no-repeat;
  text-decoration: none;
  }

  A.on2:hover, A.on2:active {
  color: #DA0006;
  background: #ffffff url(/uploads/tf/active2.gif) no-repeat;
  text-decoration: none;
  }[/HTML]

---

• 1

• torben75h...
  Sternenflotten-Admiral

  0 x

  194	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  07. 12. 2006, 16:28

  Du hast doch mehrere CSS-Klassen für die Links. Die gibst du deinen gewünschten A-Tags mit.
  In deinem TS-Code steht nur "id=current". In deinem CSS-Script gibt es aber keine ID mit diesem Namen.
  Da mußt du dann natürlich die gewünschte Klasse mit "class=gewünschteKlasse" eintragen.

  Oder sehe ich den Fehler grad nicht?

• scorp
  Padawan

  0 x

  44	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  07. 12. 2006, 16:28

  +++UPDATE+++

  Ich hab mal weiter mein TSCode gebastelt

  [TS]tmp.LEFTMENU = HMENU
  tmp.LEFTMENU {
  wrap = <div id="leftMenu"> | </div>
  special = directory
  special.value = 3
  1 = TMENU
  1 {
  wrap = <ul> | </ul>
  NO = 1
  NO.wrapItemAndSub = <li> | </li>
  NO.ATagParams = class="off1"
  ACT = 1
  ACT < .NO
  ACT.ATagParams = class="on1"
  }
  2 = TMENU
  2 {
  wrap = <ul> | </ul>
  NO = 1
  NO.wrapItemAndSub = <li> | </li>
  NO.ATagParams = class="off2"
  ACT = 1
  ACT < .NO
  ACT.ATagParams = class="on2"
  }
  }[/TS]

  Er gibt nun jenachdem wie der Link is (aktiv oder nich) die class rüber.Problem er verwirft die Stylesheet irgendwie.Die Links erfolgen in einer reihe und springen dann nach dem max breite auf die nächste Zeile.Dazu wird beim aktivieren einer Seite,wo unterseiten sind, diese nich angezeigt.

  Glaube liegt am TSCode aber noch hab ich keine AHnung woran das liegen kann.gibts da ein befehl, der typo3 sagt, wenn link1 = on1 zeigt unterseiten an ? und wenn link1 = off1 ,klappe die Unterpunkte weg?

• torben75h...
  Sternenflotten-Admiral

  0 x

  194	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  07. 12. 2006, 16:34

  Ist denn der Quelltext ansich korrekt?
  Soll heißen:
  - funktioniert der Code außerhalb von Typo3? Also als reines HTML/CSS?

  Wenn nein, guck mal nach, wo Typo3 den Code umbaut.

  Wir die CSS-Datei auch von einem Template eingebunden?

  EDIT:
  Und das mit dem Wegblenden der Unterpunkte machst du normalerweise mit deiner Dokumentenstruktur. Mit den unterschiedlichen Ebenen der Navigation.
  (Bzw. so mache ich das...)

  Sorry, wenn das für dich offensichtliche Fragen sind, aber ich bin auch schon mal fast verzweifelt, warum mein Scanner nicht funktioniert, bis ich gesehen hab, daß das Netzkabel gar nicht in der Steckdose war...

• scorp
  Padawan

  0 x

  44	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  07. 12. 2006, 16:41

  HI torben75hh,

  ja das HTML+CSS klappt, wurde vom menu aufbau auf http://www.zukunftsbau.de auch erfolgreich in dessen CMS angewandt von uns.

  Daher nehme ich an das es am TS Code liegt.
  CSS wird eingebunden und man sieht es auch,weil das über CSS eigentlich alles läuft.muss man nicht sagen das er bei ebene 2 die seiten anzeigt?

  btw. ich kenne das ,hab mich mal nen ganzen tag gewundert warum ich nichts im internet spielen konnte,aber icq und so gingen.Grund:Firewall hab ich den Internetverkehr blockiert..nun ja icq is ein thema für sich ;)

  http://www.stm-ackerstrasse.de/index.php?id=1

  das ist die Seite evtl. hilft dir das mehr.

• torben75h...
  Sternenflotten-Admiral

  0 x

  194	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  07. 12. 2006, 16:48

  So, das mit dem Nichtanzeigen liegt höchstwahrscheinlich daran, daß du mit "special.value = 3" Typo3 sagst, er solle aus der Seite mit der ID 3 eine Navigation aufbauen.
  Und zwar _ausschließlich_ aus der ID 3.

  Du müsstest für jede Menüebene, die du anzeigen lassen möchtest, diese Eigenschaft anpassen.
  Versuche mal die special-Zeile in den 1er-Block zu verschieben und für den 2er Block die Seiten-ID der nächsten Unterseite anzugeben.

  Wenn du allerdings ein normales hierachisches Menü aufbauen möchtest, dann solltest du nicht mit Directory arbeiten. Dann heißt das Zauberwort "entryLevel"...

  EDIT:
  Schau dir auch mal [url=http://www.typo3.net/tsref/cobject/hmenu/]das hier[/url] an.

• scorp
  Padawan

  0 x

  44	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  07. 12. 2006, 16:59

  Okay, das mit dem directory is verständlich.wäre also wirklich viel zu umständlich, zumal das so sein muss, das die Leute später keinerlei zusatz TS Code einbinden sollen.Heißt wäre das mit entryLevel die Lösung? wie müsste der TS Code aussehen..hab eben probiert,aber er zeigt mir dann garnichts mehr an #giggle# schon mal danke für deine Hilfe.

  gruss scorp

• torben75h...
  Sternenflotten-Admiral

  0 x

  194	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  07. 12. 2006, 17:06

  [TS]lib.erstenav = HMENU
  lib.erstenav{
  entryLevel = 0
  1 = TMENU
  1{
  NO {
  wrap = <ul id="erstenav">|</ul>
  wrapItemAndSub = <li>|</li>
  linkWrap = |&#124;|*||&#124;|*||
  }
  ACT = 1
  ACT {
  wrap = <ul id="erstenav">|</ul>
  wrapItemAndSub = <li>|</li>
  linkWrap = |&#124;|*||&#124;|*||
  ATagParams = class="high"
  }
  }
  }

  lib.zweitenav = HMENU
  lib.zweitenav{
  entryLevel = 1
  1 = TMENU
  1{
  NO {
  wrap = <ul id="zweitenav">|</ul>
  wrapItemAndSub = <li>|</li>
  linkWrap = |&#124;|*||&#124;|*||
  }
  ACT = 1
  ACT {
  wrap = <ul id="zweitenav">|</ul>
  wrapItemAndSub = <li>|</li>
  linkWrap = |&#124;|*||&#124;|*||
  ATagParams = class="high"
  }
  }
  }[/TS]

  Das ist mal ein Ausschnitt aus einem TS für meine Navi hier auf der Arbeit. Dort siehst du auch ganz gut die unterschiedlichen entryLevel.
  Wichtig ist, daß die Struktur, die du im Frontend ausgeben willst, sich im Backend wiederfindet.

  Durch die unterschiedlichen IDs der UL-Tags hab ich mehr Kontrolle über das Aussehen. Das müsstest du natürlich noch anpassen...

  EDIT:
  Ach so, nochwas. Ich habe mehrere unterschiedliche "Marker" benutzt, da auf der Seite hier die unterschiedlihcen Menüebenen an unterschiedlichen Stellen auf der Seite liegen sollen.
  Evtl. kannst du das auch nur mit einem Marker erledigen und mit den Nummern die unterschiedlichen Ebenen realisieren.

• scorp
  Padawan

  0 x

  44	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  08. 12. 2006, 11:33

  Besten Dank ! Dein Beispiel hat mir sehr geholfen ! Problem so mit gelöst ;)

  Für die Leute die evtl. auch das Problem hatten hier mein TypoScript Code.

  [TS]tmp.LEFTMENU = HMENU
  tmp.LEFTMENU {
  entryLevel = 0
  1 = TMENU
  1 {
  wrap = <ul> | </ul>
  NO = 1
  NO.wrapItemAndSub = <li> | </li>
  NO.ATagParams = class="off1"
  ACT = 1
  ACT < .NO
  ACT.ATagParams = class="on1"
  }
  2 = TMENU
  2 {
  wrap = <ul> | </ul>
  NO = 1
  NO.wrapItemAndSub = <li> | </li>
  NO.ATagParams = class="off2"
  ACT = 1
  ACT < .NO
  ACT.ATagParams = class="on2"
  }
  }[/TS]

• 1

• Zurück