Stw: Transmenu, Transmenü, Position, positionieren, Joomla! 1.0.12
*************************************************

Moin, es war Fummelkram und hat ziemlich gedauert, aber es hat sich gelohnt.

Das Problem:
Ich mußte 3 Webseiten in je 2 verschiedenen Auflösungen mit dem "JA_Transmenu" gestalten. Da die Inhalte aufgrund des Hintergrundes "absolut" positioniert werden mussten, ergab sich das Problem, dass sich das Transmenü in der "kleineren" Auflösung nicht mehr exakt positionieren ließ. Der Grund: Die Positionierung des Menüs wird im Modul direkt definiert.
(Ich habe dort für die "top" und "left" - Positionen jeweils den Wert "0" gewählt!)

Versucht man nun, das transmenu.css - File zu modifizieren (z.B. den Stand der Class-Angabe um 100px nach links zu versetzen), schnitt es den Inhalt ab bzw. vergrößerte den Submenu-Content um die 100px.

Die Lösung:

Ich habe für die jeweiligen Auflösungen (1024x768 und 1280x1024) ein eigenes css-File geschrieben und dann jeweils template_1000.css und template_1200.css genannt ... (naja, ein bißchen Copy/Paste war schon auch dabei ... na gut, ziemlich viel )

Schritt 2: Ich habe die KOMPLETTEN INHALTE des transmenu.css-Files (modules/ja_transmenu/transmenuh.css ... ist das css-File für das horizontale Menu!) in meine eigenen css-Dateien kopiert und meine Definitionen - WICHTIG! - mit folgenden Angaben ergänzt:

#menuh {
position:absolute;
top:0px;
left:100px;
height:0px;
width:0px;
/*overflow:hidden;*/
}

#submenuh {
position:absolute;
top:-205px;
left:20px;
height:0px;
width:0px;
/*overflow:hidden;*/
}


Diese Parameter "menuh" und "submenuh" kennt das Transmenü natürlich nicht. Also habe ich es ihm beigebracht:

In der Datei transmenu.php, ungefähr in Zeile 41 werden die Eigenschaften des horizontalen Menüs definiert:

case 'horizontal':
default:
echo '<div id="wrap"><div id="menu">'; // *** ACHTUNG: aus "menu" wird später "menuh" !!! ***
echo '<table cellpadding=0 cellspacing=0 border=0><tr>';
foreach ($this->parent->children[0] as $v) {
echo "<td>";
echo $this->getFirstLevelItem($v);
echo "</td>";
}
echo "</tr></table></div></div>";

break;
}

Diese habe ich ergänzt mit:

echo '<div id="submenuh">
<script language="javascript">
if (TransMenu.isSupported()) {
TransMenu.updateImgPath(\'',$this->getParam('LSPath'),'/\');
var ms = new TransMenuSet(',$direction,', ', $left,', ',$top,', ',$position,');
TransMenu.subpad_x = ',$subpad_x,';
TransMenu.subpad_y = ',$subpad_y,';

</div>';
}


Das hat so nicht geklappt, denn ich hatte die Funktion "endmenu()" nicht berücksichtigt.

Nach einigem Testen hat folgendes Prozedere funktioniert:


Man suche:

case 'horizontal':
default:
echo '<div id="wrap"><div id="menu">';
echo '<table cellpadding=0 cellspacing=0 border=0><tr>';
foreach ($this->parent->children[0] as $v) {
echo "<td>";
echo $this->getFirstLevelItem($v);
echo "</td>";
}
echo "</tr></table></div></div>";

break;
}
echo '
<script language="javascript">
if (TransMenu.isSupported()) {
TransMenu.updateImgPath(\'',$this->getParam('LSPath'),'/\');
var ms = new TransMenuSet(',$direction,', ', $left,', ',$top,', ',$position,');
TransMenu.subpad_x = ',$subpad_x,';
TransMenu.subpad_y = ',$subpad_y,';

';
}
function endMenu(){
echo '
TransMenu.renderAll();
}
init1=function(){TransMenu.initialize();}
if (window.attachEvent) {
window.attachEvent("onload", init1);
}else{
TransMenu.initialize();
}
</script>
';
}

und ersetze dies durch:

case 'horizontal':
default:
echo '<div id="wrap"><div id="menuh">';
echo '<table style="cellpadding:0; cellspacing:0; border:0;"><tr>';
foreach ($this->parent->children[0] as $v) {
echo "<td>";
echo $this->getFirstLevelItem($v);
echo "</td>";
}
echo "</tr></table></div></div>";

break;
}
echo '<div id="submenuh">
<script language="javascript">
if (TransMenu.isSupported()) {
TransMenu.updateImgPath(\'',$this->getParam('LSPath'),'/\');
var ms = new TransMenuSet(',$direction,', ', $left,', ',$top,', ',$position,');
TransMenu.subpad_x = ',$subpad_x,';
TransMenu.subpad_y = ',$subpad_y,';

';
}
function endMenu(){
echo '
TransMenu.renderAll();
}
init1=function(){TransMenu.initialize();}
if (window.attachEvent) {
window.attachEvent("onload", init1);
}else{
TransMenu.initialize();
}
</script></div>
';
}


Nächster Schritt. Sucht in der transmenu.php:

<link rel="stylesheet" type="text/css" href="',$this->getParam('LSPath'),'/',$cssfile,'">
<script language="javascript" src="',$this->getParam('LSPath'),'/transmenu.js"></script>

Diesen Absatz komplett löschen oder auskommentieren, denn der verweist auf die "transmenu.css"-Datei, die wir ja in diesem Fall nicht mehr benötigen.

Fazit: Wir haben jetzt in dieser Datei 1. den Link zu "transmenu.css" rausgeschmissen und 2. eine Submenu-Ebene definiert.

Aber wir haben auch den Weg zum "transmenu.js" gekappt. Das war gewollt, denn diesen Pfad habe ich in MEINER Template "index.php" definiert.

Also zwischen <head> und </head> einfügen:

<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/modules/ja_transmenu/transmenu.js"></script>

(ganz nebenbei bemerkt: Dies macht die Webseite übrigens auch ein Stückchen "valider" )


Das müsste es eigentlich gewesen sein.
Und wenn ich nix vergessen hab, sollte es so funktionieren.


Ich hoffe, es hilft der einen oder dem anderen ...
Grüßle
Georg