Navibar mit Ajax, CSS usw.

[mss]

hi!

ich versuche eine navigationsleiste für meine Webseite zu erstellen.
als navi-links sind darin zB "start" und "termine" vorhanden. wenn ich die navileiste von der "start"-seite aufrufe, sieht das so aus:

<A HREF="Start.html" ><FONT SIZE=1><B>Startseite</B></FONT></A>
<A HREF="Termine.html"<FONT SIZE=2>Termine</FONT></A>

wenn ich sie jedoch von der "termine"-seite aufrufe, sieht es so aus:

<A HREF="Start.html" ><FONT SIZE=2>Startseite</FONT></A>
<A HREF="Termine.html"<FONT SIZE=1><B>Termine</B></FONT></A>

ich möchte also die aktuelle seite durch fettdruck in der navileiste hervorheben.
nun soll diese leiste auf mehreren unterseiten genutzt werden. aus verschiedenen gründen (u.a. geschwindigkeit, wartbarkeit) möchte ich den code aber nur einmal erstellen.

mit ajax hab ich es nun geschafft, dass ich auf eine navi.html zugreifen kann :
(der code würde in die start.html und termine.html kopiert)

<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (http != null) {
   http.open("GET", "navi.html", true);
   http.onreadystatechange = ausgeben;
   http.send(null);
}
function ausgeben() {
   if (http.readyState == 4) {
      document.getElementById("Ausgabe").innerHTML =
         http.responseText;
   }
}
//--></script>

das problem ist nun, wie bekomme ich die unterscheidung in der navi.html hin bezüglich der verschiedenen darstellungen der schrift je nach aufrufender seite.

in der navi.html müsste irgendwas in der art stehen:

if (aufrufende_seite == "start.html")
{
  <A HREF="Start.html" ><FONT SIZE=2>Startseite</FONT></A>
  <A HREF="Termine.html"<FONT SIZE=1><B>Termine</B></FONT></A>
 }
if (aufrufende_seite == "termine.html")
{
  <A HREF="Start.html" ><FONT SIZE=2>Startseite</FONT></A>
  <A HREF="Termine.html"<FONT SIZE=1><B>Termine</B></FONT></A>
 }

die variable "aufrufende_seite" müsste dann irgendwie an die navi-html übergeben werden.

so, nun die frage:
geht dies mit ajax und js? oder auf welche art und weise ist dies machbar (außer mit php)

das ganze ist hier stark verkürzt dargestellt. es geht mir um das prinzip und die grundlegende funktonalität. in wirklichkeit umfasst die navi-leiste wesentlich mehr punkte und zudem auch bilder.

 

[Marv]

Das geht im Prinzip ganz einfach mit Klassen und CSS Deine verschachtelung mit 3 verschiedenen HTML-Tags ist so nicht mehr Üblich und nicht vom W3C empfohlen.
Besser wäre es eine Klase anzulegen z.B. so :

.active   {
 font-weight:bold;
 font-size:14px;
}

Und dann dem entsprechenden Element die Klasse "active" zuweisen. Wenn ich mich nicht irre geht das aber mit PHP.
Mit javascript könntest du vielleicht den aktuellen URL Abfragen daraus dann z.B. bei html.de/startseite das "startseite" rauspicken und eine gleichnamige ID ("startseite") im Menü ansprechen dessen Element Du dann die Klasse "activ" gibst.
Vom Prinzip müsste das auch so gehen nur weis ich jetzt nicht 100% wie das Skript dazu aussieht.

 

[mss]

<script type="text/javascript">
document.write("Aktueller Pfad: " + window.location.href);
</script><BR>

das funktioniert, aber leider nur in der aufrufenden html (zB start oder termin.html. sobald ich das in die mit ajax eingebundene (navi.html) packe, geht es leider nicht mehr. oder mach ich da was falsch?

 

[Marv]

Hm, ich muss gestehen dass ich da jetzt auch nicht soo der Experte bin :) .
Wenn die navi.html später mit ajax aufgerufen wird, wo dann die Klassen eingefügt werden, könnte es vielleicht an der Reihenfolge liegen wie die Scripte aufgerufen werden?
Sprich: Erst "navi.html" laden dann die Url abfragen und schließlich die Klasse vergeben?

 

[Elroy]

Hallo.

Vor lauter Ajax, CSS u.s.w. sollte man aber die sinnvolle Auszeichnung mit HTML nicht vergessen.
Eine Navigation zeichnet man als Liste aus. Davon kann ich in deinem Beispiel nichts sehen.
Ausserdem benutzt du veraltete Tags wie das Font Size. So etwas macht man mit CSS.

Gruss
Elroy