mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 05.12.2016 05:40 Benutzername: Passwort: Auto-Login

Thema: Aktiven Menüpunkt hervorheben vom 27.03.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Aktiven Menüpunkt hervorheben
Seite: 1, 2  Weiter
Autor Nachricht
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Mo 27.03.2006 19:14
Titel

Aktiven Menüpunkt hervorheben

Antworten mit Zitat Zum Seitenanfang

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 19:30, insgesamt 2-mal bearbeitet
 
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Mo 27.03.2006 20:09
Titel

Antworten mit Zitat Zum Seitenanfang

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");
      }
   }
}


* Mal bisschen die Nase pudern... *

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 * Nee, nee, nee *


Zuletzt bearbeitet von am Mo 27.03.2006 20:12, insgesamt 1-mal bearbeitet
 
Anzeige
Anzeige
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Mo 27.03.2006 23:40
Titel

Antworten mit Zitat Zum Seitenanfang

was gibts an der body-id methode auszusetzen? geht doch selbst wenn das menü umfangreich is perfekt.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Di 28.03.2006 10:09
Titel

Antworten mit Zitat Zum Seitenanfang

Aus bestimmten Gründen ist es aber dem Kunden nicht zuzumuten hier. Meine Güte!
 
lemmi

Dabei seit: 09.05.2006
Ort: Wuppertal
Alter: 35
Geschlecht: Weiblich
Verfasst Sa 20.05.2006 21:06
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Andy Macht

Dabei seit: 29.06.2004
Ort: Bremen
Alter: -
Geschlecht: Männlich
Verfasst Sa 20.05.2006 21:50
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
lemmi

Dabei seit: 09.05.2006
Ort: Wuppertal
Alter: 35
Geschlecht: Weiblich
Verfasst So 21.05.2006 00:04
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
Webworker

Dabei seit: 14.08.2002
Ort: new world
Alter: -
Geschlecht: Männlich
Verfasst So 21.05.2006 00:21
Titel

Antworten mit Zitat Zum Seitenanfang

schonmal daran gedacht dich selbst schlau zu machen? *zwinker*
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; }
  View user's profile Private Nachricht senden
 
Ä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?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.