| Autor |
Nachricht |
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 27.03.2006 20:14
Titel Aktiven Menüpunkt hervorheben |
  |
|
Hi,
Ich habe hier einen Kunden, der will ne Website, allerdings kann man nicht davon ausgehen, dass der Webprovider php hat/haben wird. Ist halt so.
Ich suche deshalb ne intelligente Möglichkeit, in der Navigation den aktuellen Menüpunkt hervorzuheben. Auf den CSS-Trick mit der Body-ID will ich nicht zugreifen, weil das Menü sehr umfangreich ist.
Alles, was ich gefunden habe, ist folgendes Script von DrWeb, welches aber vermutlich nicht mehr modernen Standards entspricht. Vielleicht kann mir jemand einen Tipp geben, wie das im DOM aussehen muss/darf? Oder ist das schon richtig so? Und wie müsste man das abändern, damit es nur in der Liste (ul) mit der id "menue" sucht?
| Code: |
// Bei Link auf aktuelle Seite die CSS Klasse auf aktiv setzen
// Alle Links durchlaufen und pruefen
// Link auf aktuelle Seite gefunden, also umsetzen CSS auf aktiv
<script language="JavaScript">
function highlightCurrentPageLink() {
var anzHrefs = document.getElementsByTagName("a").length;
for (var i = 0; i <= anzHrefs - 1; i++) {
if (document.getElementsByTagName("a")[i].href == document.location.href) {
var currentClassName = document.getElementsByTagName("a")[i].className;
var newClassName = currentClassName.replace(/inaktiv/,"aktiv");
document.getElementsByTagName("a")[i].className = newClassName;
}
}
}
</script>
|
Quelle
weitere Codestücke, an denen ich bastle: jeffcroft.com
Zuletzt bearbeitet von am Mo 27.03.2006 20:30, insgesamt 2-mal bearbeitet
|
|
| |
|
 |
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 27.03.2006 21:09
Titel
|
|
|
Lösung:
| Code: |
function appendClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
function highlightLinks() {
var anzHrefs = document.getElementsByTagName("a").length;
for (var i = 0; i <= anzHrefs - 1; i++) {
if (document.getElementsByTagName("a")[i].href == document.location.href) {
appendClass(document.getElementsByTagName('a')[i],"aktiv");
}
}
}
|
Jetzt müsst ich noch überprüfen, weil es tut nicht wenn "index.htm" oder "index.php#sprung" hintendransteht. Wie könnte man das checken lassen? Es soll ja nicht aktiv werden, wenn man den Link "/eins/zwei/" hat und sich aber in "/eins/zwei/drei/" befindet 
Zuletzt bearbeitet von am Mo 27.03.2006 21:12, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 28.03.2006 00:40
Titel
|
|
|
|
was gibts an der body-id methode auszusetzen? geht doch selbst wenn das menü umfangreich is perfekt.
|
|
| |
  |
|
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 28.03.2006 11:09
Titel
|
|
|
Aus bestimmten Gründen ist es aber dem Kunden nicht zuzumuten hier. 
|
|
| |
|
|
lemmi
Dabei seit: 09.05.2006
Ort: Wuppertal
Alter: 42
Geschlecht: 
|
Verfasst Sa 20.05.2006 22:06
Titel
|
|
|
Hallo,
ich möchte bei meiner website den aktiven menüpunkt der Navigationsleiste hervorheben. Habe die Leiste bisher mit CSS gestaltet, kenne die Funktionen a:active/ hover, usw. Aber keine Ahnung wie ich das mache, das man im menü sieht, auf welchem Navigationspunkt man gerade ist. Wie geht das mit der body-id?
Gruß
Lemmi
|
|
| |
|
|
Andy Macht
Dabei seit: 29.06.2004
Ort: Bremen
Alter: -
Geschlecht:
|
Verfasst Sa 20.05.2006 22:50
Titel
|
|
|
| Code: |
<li class="active">Menüpunkt</li>
|
und
| Code: |
.active { background-color: #CC00CC; }
|
und fertig ist die Laube.
Die Seite wurd doch eh nicht dynamisch oder hab ich das falsch verstanden?
|
|
| |
 |
|
lemmi
Dabei seit: 09.05.2006
Ort: Wuppertal
Alter: 42
Geschlecht:
|
Verfasst So 21.05.2006 01:04
Titel
|
|
|
|
Vielen Dank, das ist genau das was ich wollte! Allkerdings finde ich diesen Aufzählunghspunkt vor dem Wort nicht so schick. Kriegt man den irgendwie weg? Außerdem hab ich gelesen, dass man <li> mit <ol> oder <ul> verschachteln muss.... bei mir funktioniert es aber auch ohne <ol> und <ul>, also kann ich das dann ja weglassen oder?
|
|
| |
|
|
Webworker
Dabei seit: 14.08.2002
Ort: new world
Alter: -
Geschlecht:
|
Verfasst So 21.05.2006 01:21
Titel
|
|
|
schonmal daran gedacht dich selbst schlau zu machen? 
oder denkst du lexika wurden erfunden damit man andere fragen kann? *g*
ul für ungeornete listen, ol für geordnete zum beispiele mit aufzählungszeichen (1. 2. 3. ...)
ul bzw ol sollte doch schon die li (Listenelement) umschließen! es ist einfach die begrenzung einer liste.
um den schönen punkt davor weg zu bekommen einfach dem li in der css das hier zuweisen
| Code: | | li { list-style: none; } |
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
aktiven link hervorheben
Dreamweaver, Spry Menü:ausgewählten Menüpunkt hervorheben
Aktiven Navigationspunkt mit Klasse ansprechen
[PHP] Navigation mit array -- Problem mit aktiven Links
Spry Menü in Dreamweaver CS4 - aktiven Button highlighten
CSS - Menüpunkt aktivieren?
|
|
Willkommen auf dem Portal für Mediengestalter
