Hilfe: navigation included - wie kann man den aktiven menüpunkt highlighten?

[nea23]

Hallo liebe Programmierer

Ich bin neu hier und außerdem Anfängerin (kann kein PHP und JavaScript...) und habe mit viel Glück und einzelnen Code-Fragmenten eine Seite zurechtgebastelt die schon ganz gut funktioniert , ABER

ich wollte die Navi auslagern, weil ich ganz viele Seiten habe (und wenn ich da mal was ändern muss....) also habe ich das mit PHP include gemacht (eine navi.php)... und die inhalte der Seite lade ich mit einer get.js datei in einen dafür vorgesehenen DIV container in meiner index.php, weil ich die seite nicht neu laden möchte (ich habe einen sound und eine animation die ständig und flüssig laufen sollen), und das klappt alles, NUR

wie kann ich jetzt der navi.php sagen welcher inhalt in meiner DIV steht, damit ich dem "aktiven" link das richtige aussehen zuweisen kann? man weiss ja sonst nicht wo man grade ist...
das ist auch nicht so gut für die Usability, oder

Dachte das kann man vielleicht über irgendein Skript lösen, das ständig abfragt was in meine DIV reingeladen wurde, und die info dann an die navi.php schickt, damit der gedrückte link eine andere farbe kriegt oder so???

ich kenn mich einfach zu wenig aus mit programmieren. vielleicht geht das ganze auch leichter zu lösen?

bin wirklich für jeden Hinweis dankbar!!!

Achso hier ein paar ansichten aus meiner Seite

meine navi.php

	<ul id="mainnavi">
		<li>
			<a href="javascript: void(0);" onclick="getHome();" class="n1" >&nbsp;</a>
		</li>
		<li>
			<a href="javascript: void(0);" onclick="getUeberMich();" class="n2" >&nbsp;</a>
		</li>
		<li>
			<a href="javascript: void(0);" onclick="getHobbys();" class="n3" >&nbsp;</a>
		</li>
		<li>
			<a href="javascript: void(0);" onclick="getKontakt();" class="n4" >&nbsp;</a>
		</li>
    </ul>

in der get.js steht

            function getKontakt(){
                new Ajax.Request('kontakt.php', {
                    method: 'get',
                    onSuccess: getHTMLSuccess,
                    onFailure: getHTMLFailure
                });
            }
	
// usw.
            
            function getHTMLSuccess(originalRequest){
                var response = originalRequest.responseText;
                $('content').innerHTML = response;
            }
            
            function getHTMLFailure(){
                alert('Diese Seite steckt noch in der Entwicklung: Bitte versuchen Sie es später noch einmal.');
            }
            
            function clearNode(node){
                $(node).innerHTML = "";
                $(node).innerHTML = "";
            }

LG, nea23

[mantonis]

schau dir das mal an

Aktiven Menüpunkt hervorheben, obwohl die Navigation includiert wurde? - XHTMLforum

vielleicht hilft dir das weiter

[sokie]

in deinem Fall wäre das mit zB;

a:focus{
  background: yellow; /*oder andere hervorhebungen*/
}

zu machen. Das Problem an der Stelle ist nur, dass der Zustand :focus aufgehoben wird, sobald an einer anderen Stelle im Dokument geklickt wird.

Der Vorschlag aus #2 trifft auf dein Problem nicht zu, weil die Seite ja nicht neugeladen wird, wenn auf einen Menüpunkt geklickt wird. Wenn du mit CSS-Klassen arbeiten willst, müssten die natürlich per Javascript manipuliert werden.

ps: welche javascript-Framework wird da benutzt?

[nea23]

Hi mantonis

lieb von dir, den Beitrag hatte ich auch gefunden und es ausprobiert, aber das hat nicht funktioniert bei mir - wahrscheinlich, wie sokie sagt, weil ich meine Seite ja nicht aktualisiere

Aber danke für deine schnelle Antwort


und hi sokie

ich hab da mehrere frameworks drin (glaube ich) weil ich noch mit einem Coda Slider rumgespielt habe? ich liste das mal auf (wenn das überhaupt das ist wonach du fragst?)

prototype-1.6.0.2.js
jquery-easing.1.2.js
jquery-easing.1.2.pack.js
jquery-easing-compatibility.1.2.js
jquery-easing-compatibility.1.2.pack.js
jquery-1.2.1.pack.js
coda-slider.1.1.1.js
coda-slider.1.1.1.pack.js

keine Ahnung ob ich die wirklich alle brauche. aber das wäre ja leicht herauszufinden einfach rauswerfen, oder? und dann sehen ob es noch funktioniert?

zurück zum Thema, na ja und dann natürlich meine ?get.js?? über die ich alle links steuer...

ich versuch das gleich mal mit deinem tipp a:onfocus!

Danke sokie,
und
LG, nea

[nea23]

Hi Sokie!

Ich habe die Klasse a:focus in meinem css ergänzt, aber es tut sich nichts.
Gibt es noch eine andere Möglichkeit?

LG, nea

[sokie]

merkwürdig. bei meinem Testcode funktioniert es.
ok, grad gesehen, der Internet Explorer braucht da noh die :active pseudoklasse
zB:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#mainnavi a:focus,
#mainnavi a:active{
  background: #ffaa99;
  outline: none;
}
</style>

<title></title>
</head>

<body>
    <ul id="mainnavi">
        <li>
            <a href="javascript: void(0);" onclick="getHome();" class="n1" >home</a>
        </li>
        <li>
            <a href="javascript: void(0);" onclick="getUeberMich();" class="n2" >&uuml;ber mich</a>
        </li>
        <li>
            <a href="javascript: void(0);" onclick="getHobbys();" class="n3" >Hobbies</a>
        </li>
        <li>
            <a href="javascript: void(0);" onclick="getKontakt();" class="n4" >Kontakt</a>
        </li>
    </ul>
</body>
</html>

[nea23]

Hi sokie!

Habs ergänzt und im Firefox geht es auch - aber in Safari nicht
Naja und das Problem ist: ich hab noch Seiten mit einer Unternavigation. Wenn ich auf der dann klicke ist die Markierung ja wieder weg...

Gibt es vielleicht noch eine andere Möglichkeit?

LG, nea