Zum Inhalt springen

Sprachenanbhäniges JavaScript-Menü generieren

Erstellt am 7. August 2006 · 10 Antworten · letzte Antwort am 8. August 2006

Tags: Frage

skyknight ·

Hallo,

ich bin gerade dabei eine ehemalige HTML-Seite in Typo3 4.0 mit TemplaVoila umzusetzen. Das funktioniert auch ganz gut soweit, aber das Problem ist, dass die HTML Seite über ein JavaScript Submenü (2. Ebene) verfügt und ich nicht weiß, wie ich das jetzt in Typo3 generieren und einbinden soll. Ich könnte es ja statisch machen, aber das Problem ist, dass die Seite zweisprachig ist (ich also dann zwei Templates benutzen müsste nur wegen dem Menü) und ich eh nicht genau weiß, wie ich die JavaScript-infos in die Links des Hauptmenüs bekomm.

Kann mir jemand von Euch sagen, wie ich das am besten angeh?

Wäre mir eine große Hilfe, danke!

skyknight ·

Hi,
also so soll das Ganze aussehen:

Bild: starnut.com/…/menu_shot.gif

Bei Rollover über die Untermenüs werden sie hellblau.

Im HTML-Header wird jetzt die Funktion mmLoadMenus definiert, in der die einzelnen Menüpunkte per Hand in der nötigen Sprache reingeschrieben wurden:

function mmLoadMenus() {
  if (window.mm_menu_0112122711_0) return;
  window.mm_menu_0112122711_0 = new Menu("root",150,21,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#2b83c3","#99ccff","left","middle",5,0,1000,-75,7,true,true,true,0,false,true);
  mm_menu_0112122711_0.addMenuItem("Wir über uns","location='ueberuns.htm'");
  mm_menu_0112122711_0.addMenuItem("Wie wir vorgehen","location='vorgehen.htm'");
  mm_menu_0112122711_0.addMenuItem("Entwicklung","location='entwicklung.htm'");
  mm_menu_0112122711_0.addMenuItem("Standorte","location='standorte.htm'");
   mm_menu_0112122711_0.fontWeight="bold";
   mm_menu_0112122711_0.hideOnMouseOut=true;
   mm_menu_0112122711_0.menuBorder=0;
   mm_menu_0112122711_0.menuLiteBgColor='#ffffff';
   mm_menu_0112122711_0.menuBorderBgColor='#ffffff';
   mm_menu_0112122711_0.bgColor='#ffffff';
  window.mm_menu_0112124021_1 = new Menu("root",170,21,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#2b83c3","#99ccff","left","middle",5,0,1000,-75,7,true,true,true,0,false,true);
  mm_menu_0112124021_1.addMenuItem("Elekt. Anlagenbau","location='anlagenbau.htm'");
  mm_menu_0112124021_1.addMenuItem("Industrieautomation","location='automatisierungstechnik.htm'");
  mm_menu_0112124021_1.addMenuItem("Schaltanlagenbau","location='schaltanlagenbau.htm'");
  mm_menu_0112124021_1.addMenuItem("Thermografie","location='thermografie.htm'");

  mm_menu_0112124021_1.fontWeight="bold";
   mm_menu_0112124021_1.hideOnMouseOut=true;
   mm_menu_0112124021_1.menuBorder=0;
   mm_menu_0112124021_1.menuLiteBgColor='#ffffff';
   mm_menu_0112124021_1.menuBorderBgColor='#ffffff';
   mm_menu_0112124021_1.bgColor='#ffffff';
  window.mm_menu_0112124602_2 = new Menu("root",150,21,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#2b83c3","#99ccff","left","middle",5,0,1000,-75,7,true,true,true,0,false,true);
  mm_menu_0112124602_2.addMenuItem("Ansprechpartner","location='ansprechpartner.htm'");
  mm_menu_0112124602_2.addMenuItem("Anfahrtskizze","location='anfahrtskizze.htm'");
  mm_menu_0112124602_2.addMenuItem("Antwortformular","location='antwortformular.htm'");
   mm_menu_0112124602_2.fontWeight="bold";
   mm_menu_0112124602_2.hideOnMouseOut=true;
   mm_menu_0112124602_2.menuBorder=0;
   mm_menu_0112124602_2.menuLiteBgColor='#ffffff';
   mm_menu_0112124602_2.menuBorderBgColor='#ffffff';
   mm_menu_0112124602_2.bgColor='#ffffff';
  window.mm_menu_0112124859_3 = new Menu("root",150,21,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#2b83c3","#99ccff","left","middle",5,0,1000,-75,7,true,true,true,0,false,true);
  mm_menu_0112124859_3.addMenuItem("Unternehmen","location='unternehmen.htm'");
  mm_menu_0112124859_3.addMenuItem("Angebotsanlagen","location='angebotsanlagen.htm'");
  mm_menu_0112124859_3.addMenuItem("Formulare","location='formulare.htm'");
  mm_menu_0112124859_3.addMenuItem("Handbücher","location='handbuecher.htm'");
   mm_menu_0112124859_3.fontWeight="bold";
   mm_menu_0112124859_3.hideOnMouseOut=true;
   mm_menu_0112124859_3.menuBorder=0;
   mm_menu_0112124859_3.menuLiteBgColor='#ffffff';
   mm_menu_0112124859_3.menuBorderBgColor='#ffffff';
   mm_menu_0112124859_3.bgColor='#ffffff';
  window.mm_menu_0215103830_4 = new Menu("root",150,21,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#2b83c3","#99ccff","left","middle",5,0,1000,-5,7,true,true,true,0,false,true);
  mm_menu_0215103830_4.addMenuItem("Jobangebote","location='jobs.htm'");
  mm_menu_0215103830_4.addMenuItem("Ausbildung","location='ausbildung.htm'");
  mm_menu_0215103830_4.addMenuItem("Praktika","location='praktika.htm'");

   mm_menu_0215103830_4.fontWeight="bold";
   mm_menu_0215103830_4.hideOnMouseOut=true;
   mm_menu_0215103830_4.menuBorder=0;
   mm_menu_0215103830_4.menuLiteBgColor='#ffffff';
   mm_menu_0215103830_4.menuBorderBgColor='#ffffff';
   mm_menu_0215103830_4.bgColor='#ffffff';

  mm_menu_0215103830_4.writeMenus();
} // mmLoadMenus()

Zudem wird eine externe Datei "mm_menu.js" eingebunden:

<script language="JavaScript1.2" src="mm_menu.js" type="text/javascript"></script>

Im Body-Tag wird dann die Funktion "mmLoadMenus" ausgeführt:

<body>
	<!-- Load JavaScript for menus -->
	<script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script>
...

Und natürlich muss das jeweilige Menü noch im Menüpunkt aufgerufen werden:

<div class="mainmenu_no"><a href="#" onmouseout="MM_startTimeout()" onmouseover="MM_showMenu(window.mm_menu_0112122711_0,150,132,null,'tbanner')">Unternehmen</a></div>

das "tbanner" ist dabei ein Bild, das ich als Ankerpunkt für die Positionierung des Menüs benutze. Dieser Bildankerpunkt wird vom Script benötigt.

Mein Problem ist jetzt eben, dass ich all diese Funktionalitäten mit Typo3 dynamisch generieren muss, d.h. dass er die Untermenüs automatisch generieren soll und das in der aktuellen Webseitensprache.

Ausserdem muss sich diese Funktionalität gezielt für einige Menüpunkte abstellen lassen können, die keine Untermenüs haben sollen, obwohl sie Unterseiten haben. Gut, das könnte man tricksen, indem man die Seite anders anlegt, aber da der Kunde das nachher selbst betreuen will, könnte ihn das irritieren. Ich suche deshalb nach einer "kontrollierteren" Version.

Kann mir jemand damit helfen? Ich kenn mich in JS nicht sonderlich gut aus und vor allem nicht mit dem Zusammenspiel mit Typo3 (TS)... #paralyzed#

Unbekannter Benutzer ·

Tja,

also in dem JS das du gepostet hast, werden ja nur funktionen aufgerufen, die wahrscheinlich in der js Datei stehen, die da eingebunden wird. Da ich die nicht kenne, habe ich keine Ahnung was da passiert. Aber wie sieht denn der HTML/JS Code des Menüs aus. Mach mal die Seite auf und poste den entsprechenden Teil des Quellcodes. Das Endergebnis ist ja das spannende...

So wie das aussieht, brauchst du doch nur ein paar wraps um die ganze Sache zu machen, dann kann sicherlich viel vom JS weg.

Wie man das mit den nicht angezeigen Untermenüs löst, würde ich dann danach erst überlegen...

skyknight ·

Hi,

also ich hab im Post davor schon mal eine Menüzeile gepostet, wie ich sie im Moment in HTML liegen habe:

<div class="mainmenu_no"><a href="#" onMouseOut="MM_startTimeout()" onMouseOver="MM_showMenu(window.mm_menu_0112122711_0,150,132,null,'tbanner')">Unternehmen</a></div>

In Typo hab ich das ganze noch nicht einbinden können. Das steht heute auf dem Plan (Mit TemplaVoila). Ich dachte nur, ich müsste schon vorher festlegen, wie das ganze funktioniert, bevor ich es einbinde... Kann mir vorstellen, dass es eigentlich recht einfach sein könnte, da ja die ganzen Funktionalitäten extern liegen. Ich muss halt das Menü dynamisch erzeugen und den Punkten zuweisen. Und da bin ich hoffnungslos überfragt...

Was brauchst du noch für Infos?

Unbekannter Benutzer ·

Ja die Zeile habe ich gesehen, dass ist ja ein Hauptmenüpunkt. Irgendwo im Quelltext müsste ja eigentlich auch der Code fürs Submenü zu finden sein...
Den würde ich gerne mal sehen, denn den müsstest du eigentlich anstatt in JS in TYPO erstellen.
Alternativ den Inhalt der .js-Datei oder vielleicht beides...

skyknight ·

Hi,
der Code fürs Submenü ist der große Klotz ganz oben. Da wird unter einer "ID" ein Menü generiert, über den das Untermenü dann vom Hauptmenüpunkt aufgerufen wird. Hier das Submenü für den ersten Hauptmenüpunkt:

window.mm_menu_0112122711_0 = new Menu("root",150,21,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#2b83c3","#99ccff","left","middle",5,0,1000,-75,7,true,true,true,0,false,true);
  mm_menu_0112122711_0.addMenuItem("Wir&nbsp;&uuml;ber&nbsp;uns","location='ueberuns.htm'");
  mm_menu_0112122711_0.addMenuItem("Wie&nbsp;wir&nbsp;vorgehen","location='vorgehen.htm'");
  mm_menu_0112122711_0.addMenuItem("Entwicklung","location='entwicklung.htm'");
  mm_menu_0112122711_0.addMenuItem("Standorte","location='standorte.htm'");
   mm_menu_0112122711_0.fontWeight="bold";
   mm_menu_0112122711_0.hideOnMouseOut=true;
   mm_menu_0112122711_0.menuBorder=0;
   mm_menu_0112122711_0.menuLiteBgColor='#ffffff';
   mm_menu_0112122711_0.menuBorderBgColor='#ffffff';
   mm_menu_0112122711_0.bgColor='#ffffff';

Zu vergleichen: die ID mm_menu_0112122711_0 mit obigem Aufruf im Hauptmenüpunkt.

Oder brauchst Du den Code für die Funktion "Menu" (aus dem Aufruf new Menu(...))?

Unbekannter Benutzer ·

Genau am besten den Code für die Funktion Menu(). Da wird ja am Ende wohl auch irgendein HTML-Code rauskommen, sonst würde man ja im Browser nichts sehen... Und den würde ich gerne kennnen, aber das sagt mir vielleicht die Menu() Funktion.

Noch so ein Tipp am Rande, das was du da machst, ist ja ein relativ "normales" Menü, dass könnte man auch bequem ganz anders lösen. Wenn es dir also nicht genau auf diesen JS Code ankommt, sondern nur aufs Ergebnis, würde ich mir an deiner Stelle entweder mal die LAYER Menüs angucken, oder die auch hier im Forum vorgestellten Lösungen für DropDown-Menüs. Da muss man je nach dem ein bisschen umstricken, aber das könnte insgesamt noch leichter werden als das hier...

skyknight ·

Hi,
Also mir gehts einzig und allein ums Ergebnis, von daher ist das wahrscheinlich ein besserer Ansatz. Hast Du einen besonders empfehlenswerten Link im Kopf? Sonst werd ich die Suchfunktion bemühen. 🙂

Ich denk es hat wenig Sinn, diese riesige JS-Datei jetzt auch noch aufzudröseln. Wenn Du willst, stell ich sie aber auch noch online. Vielen Dank aber für die Hilfe soweit!