Abändern des horizontalen Menüs über onclick javascript

[CrazyPlaya]

Hallo zusammen,

ich würde gerne beim Klicken auf einen Link im Horizontalen Menü innerhalb des a - Elementes 2 span - Elemente einfügen. Dies mach ich wie folgt:

function getOnAClick()
{
    document.getElementById('navi').onclick = function(e) 
    {
        if (!e) e = window.event;
        var elem = e.target || e.srcElement;
        if(elem.tagName != 'A')
            return;
            
        elemText = elem.text;
        spanfirst = document.createElement("span");
        elem.appendChild(spanfirst);
        spansec = document.createElement("span");
        spanfirst = elem.getElementsByTagName("span")[0];
        spanfirst.appendChild(spansec);
        spansec.innerHTML = elemText;
    };
}

Aufgerufen wird diese Funktion in der Index.php nach dem der Navi Block gesetzt wurde.

Das Problem ist, das beim Durchdebuggen alles korrekt abläuft aber danach sind die beiden Span Elemente nicht gesetzt. Ich vermute, dass irgendeine Joomla JS Funktion dies wieder rückggängig macht.
Ich hab eingeschaltet das aktive Links mit der id: "active_menu-nav" gekennzeichnet werden.

Mein Ziel bei der Sache ist es eine Grafik in den Hintergrund des aktiven Links zu bringen. Diese Grafik besteht aus 3 Teilen, dem linken, dem rechten Rand und dem Mittelteil.

Meine Frage ist nun zuerst mal, welche Methode ist dafür zuständig die id zu setzen, da ich vermute das meine Anpassungen an dieser Stell wieder verworfen werden. Mir ist auch aufgefallen das die ID in meiner Funktion noch nicht gesetzt ist.

Als zweite Frage, weiß vllt jemand eine Alternativlösung um mein Ziel zu erreichen?

Gruß
CrazyPlaya

 

[Samuelll]

AW: Abändern des horizontalen Menüs über onclick javascript

Wenn es nur drum geht den Hintergrund eines Listenpunktes einer Navigation in Joomla zu ändern, passe via Overwrites in Deinem Template den HTML-Aufbau der Navigation an.
Danach kannst du das mit CSS nachformatieren.

Ich gehe hierbei davon aus, dass Du den Navigationspunkt durch Dein Vorhaben in der Breite flexibel gestalten willst !?

Es würden hier auch 2 Grafiken reichen :

1. Anfang + ein ausreichendes Stück vom Mittelteil
2. Ende + ein ausreichendes Stück vom Mittelteil

Schachtel einfach einen <a>-Tag und ein Span ineinander.
Hab ich letztes selbst erst gemacht um die Höhe einer Navigation flexibel zu halten.

Dabei hab ich kein Stück JavaScript benötigt.

 

[CrazyPlaya]

AW: Abändern des horizontalen Menüs über onclick javascript

Dieser Listenpunkt soll ja mit dem Hintergrund gefüllt sein wenn er gerade aktiv ist sprich wenn ich auf die dahinterliegende Seite verlinkt wurde. Sobald eine andere Seite über das Menü aufgerufen wird soll der inaktive Link wieder normal.

In welchem Verzeichnis finde ich denn die Dateien die für die Navigation überschrieben werden müssen? Müsste ja unter Module zu finden sein oder?

 

[Samuelll]

AW: Abändern des horizontalen Menüs über onclick javascript

Joomla hinterlegt jeden JETZT aktiven Link mit der class activeKlasse active bzw. current.
Die Joomla-Dateien die du ggf. anpassen musst findest du in den Modulen. Richtig.

 

[CrazyPlaya]

AW: Abändern des horizontalen Menüs über onclick javascript

Also schon mal danke für die Tipps.
Hab die Datei zum Überschreiben gefunden
Geht man bei den Modulen eigentlich genauso vor wie bei den Komponenten?
Also wie man das HTML Verzeichnis mit Unterverzeichnissen erstellt so dann auch ein Verzeichnis modules in meinem Template Verzeichnis erstellen und wie in diesem Fall dann ein Unterverzeichnis mod_mainmenu etc.?

Jetzt aber das Problem das ich noch habe. Bekomme die Grafiken jetzt nicht mehr korrekt angeordnet...habe es vorher dummerweise die ganze Zeit in einem Div getestet ohne ul und li:s

Hier mal mein CSS Code:

ul#mainlevel-nav, ul#mainlevel-nav li
{
    list-style:none;
    margin-left:118px;
    padding:0px;
}

ul#mainlevel-nav
{
    display:block;
    height: 64px;
}

ul#mainlevel-nav li
{
    display:inline-block;
    float:left;
    padding:0px;
    margin:0px;
    height:64px;
    
}

ul#mainlevel-nav li a
{
    display:block;
    font-family:tahoma;
    font-size:10pt;
    font-weight:bold;
    text-decoration:none;
    padding:25px 20px;
}

//active_menu-nav ist die Id die von Joomla für den gewählten Link gesetzt wird
a#active_menu-nav
{
    display:block;
    background:url('../images/menu_tail.gif') top left repeat-x;
    text-decoration:none;
    font-weight:bold;
    font-family:tahoma;
    font-size:10pt;
    height:40px;
}

a#active_menu-nav span
{
    display:block;
    float:right;
    background:url('../images/menu_left.gif') left top no-repeat;
    height:40px;
    font-weight:bold;
    font-size:10pt;
    font-family:tahoma;
}

a#active_menu-nav span span
{
    background:url('../images/menu_right.gif') right top no-repeat;
    height:40px;
    padding-left:50px;
    padding-top:10px;
    padding-right:50px;
}

//Hier nun der HTML Code. 
<div id="navi">
<ul id="mainlevel-nav">
 <li>
  <a href="" class="mainlevel-nav" id="active_menu-nav">
   <span>
    <span>Home</span>
   </span>
  </a>
</li>
<li>
 <a href="" class="mainlevel-nav" >
  Wir Sind
 </a>
</li>
<li>
 <a href="" class="mainlevel-nav" >
  Gottesdienst
 </a>
</li>
</div><!-- Ende Navi -->

Dabei wird nun das mittlere Teil(menu_tail) oben dargestellt und die anderen beiden weiter unten.
Was muss ich noch anpassen?

 

[Samuelll]

AW: Abändern des horizontalen Menüs über onclick javascript

Ist egal ob Modul oder Komponente. Ebenfalls ist es auch egal ob standardmäßig dabei oder später installiert.

Schau dir das Template Beez als Beispiel an.

CSS :
Das float : right: kannst du dir schenken. Die Elemente sind doch alle ineinander geschachtelt. Da reicht es mit margin/padding zu arbeiten !

 

[CrazyPlaya]

AW: Abändern des horizontalen Menüs über onclick javascript

Sorry das ich erst so spät wieder von mir hören lasse. Viel um die Ohren:s
So ich hab es nun gelöst wie gewünscht allerdings noch mal auf anderem Wege.
Das mit dem Überschreiben hat gut geklappt.

Besten Dank noch an Samuelll

 

[Samuelll]

AW: Abändern des horizontalen Menüs über onclick javascript

Und wie hast du es gelöst ?

 

[CrazyPlaya]

AW: Abändern des horizontalen Menüs über onclick javascript

Uupps Sorry war so schnell raus gestern wieder
Habe um den Link rum ein div gemacht, und innerhalb dieses Blocks ein span hinterdem Link und dann mit floating positioniert.