Aktiver Navigationspunkt in der Hauptnavigation auch in Sub Navigation sichtbar machen

[mr-otin]

Hallo,

ich möchte folgende Sache realisieren:

Wenn ich in der Hauptnavigation einen Link anklicke soll dieser auch der jeweilige Sub Navigation hervorgehoben werden. Zum Verständnis: Ich bin auf der Seite Home (Hauptnavigationspunkt Home ist mit einer BG Color hinterlegt). Auf der Seite Home habe ich ein Submenü welche auch Navigationspunkte besitzten die mit der gleichen BG Color hinterlegt werden sollen. Klicke ich nun auf einen dieser Navigationspunkte im Submenü soll in der Hauptnavigation der Punkt Home trotzdem mit der BG color belegt bleiben.

Wie kann ich das ganze realisieren? Am besten mit einem Script? CSS only?

Mit freundlichen grüssen
Dave

 

[SpiceLab]

Handelt es sich hierbei um einzelne statische Seiten, oder um dynamische Inhalte, die per Klick im Hauptdokument getauscht/nachgeladen werden, entweder per AJAX oder PHP?

Wird die Navigation als globales Template in das(die) Dokument(e) eingebunden?

 

[mr-otin]

Hallo Spice,

hierbei handelt es sich um PHP seiten. Mehr statisch als Dynamisch ;-). Ich wusste halt nur nich wo ich es reinschreiben sollte! Die Haupt und Sub Navigation wird inkludiert auf die Index. Ich habe auch schon ein Jquery Script was dies eigentlich dynamisch bewerkstelligen soll, jedoch funzt dies nicht so wie es soll oder es haut was nicht mit dem CSS hin.

Und zwar mache ich ein hidden input-feld mit der id="for_current" und schreibe per Jquery "current" in die Klasse der Li's. Dies funktioniert aber nur in der Subnavi.

<script type="text/javascript">
function getMenuVar()
{
  var route=document.getElementById("for_current").value;
  return route;
}
$(document).ready(function() {
  route = getMenuVar();
  if (route == 'home') {
   $('#home').addClass('current');
  } else if (route == 'hotelzimmer') {
   $('#hotelzimmer').addClass('current');
  } else if (route == 'gastronomie') {
   $('#gastronomie').addClass('current');
   } else if (route == 'arrangements') {
   $('#arrangements').addClass('current');
    } else if (route == 'wellness') {
   $('#wellness').addClass('current');
   } else if (route == 'freizeit') {
   $('#freizeit').addClass('current');
   } else if (route == 'bankett') {
   $('#bankett').addClass('current');
   } else if (route == 'galerie') {
   $('#galerie').addClass('current');
   } else if (route == 'kontakt') {
   $('#kontakt').addClass('current');
  } else {
   $('#home').addClass('');
  }
});

Das gleiche mache ich auch in der Hauptnavi mit dem Hidden Input-Feld id="for_curent" aber da passiert nix. Ich weis nicht wie ich es anstellen soll, da es ein paar seiten sind um alles von Hand zu ändern.

 

[SpiceLab]

Entspricht http://www.gipspferd.de/css/anleitung/a6/demo3/index.php deinen Vorgaben?

Eine Anleitung gibt's dazu auch: http://www.gipspferd.de/css/anleitung/a6/a6_2.php

 

[mr-otin]

Hallo Spice,

Danke für deine Bemühung! Der Ansatz ist ähnlich. Wenn ich Knoten 3 anklicke, soll er blau hinterlegt werden --> Klicke ich nun auf Unterknoten
3 soll dieser auch blau belegt werden und Knoten 3 seinen aktiven blauen Status behalten. Ich muss es irgendwie schaffen das ich den Status von Punkt 3 speichere/hinterlege und beim klicken auf einen der Unterknoten 3 der aktive Status ausgelesen/aufgerufen wird und der Unterknoten den gleichen Status erhält wie der Knotenpunkt.

MfG
Dave

 

[SpiceLab]

Wenn du das jeweilige Pfeil-Hintergrundbild beachtest, erkennst du, dass deine Vorstellung umsetzbar ist

Hier der relevante Auszug des CSS:

#navi LI:hover #k1 + A ,
#navi LI:hover #k2 + A ,
#navi LI:hover #k3 + A
{
background:url(down.png) no-repeat right center #aaa;  /* Hier die gewünschte Hintergrundfarbe anpassen */
color:#000;
}

...

#seite1 #k1 + A ,
#seite2 #k2 + A ,
#seite3 #k3 + A
{
background:url(down.png) no-repeat right center #aaa;   /* Hier die gewünschte Hintergrundfarbe anpassen */
}

 

[mr-otin]

Nur wie sieht es bei 2 Navis aus. Ich steig da nicht durch! Hier mal ein Bild wie es aussehen soll. Im oberen Teil ist die Hauptnavi (mit unterknoten dropdown) und links in der Sidabar ist die Subnavi. Beide Navis sind includiert also 2 verschiedene Dateien.

 

[SpiceLab]

Bei zwei voneinander getrennten Navigationen bietet sich die beschriebene Technik im Webmaster-FAQ-Artikel [CSS] Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben? an, deren Stylesheet entsprechend zu erweitern wäre.

 

[SpiceLab]

In Anlehnung an die zweite Variante (= Für das <body>-Element und die <a>-Elemente werden ID-Bezeichner deklariert) könnte die Erweiterung für zwei getrennte Listenmenüs (bezogen auf die Startseite "Hotel" u. Unterseite "Preise") wie folgt lauten:

<body id="hotel">
  <ul id="topNav">
    <li><a id="hotelNav" href="hotel.php">Hotel</a></li>
    <!-- ... -->
  </ul>

  <ul id="subNav">
    <li><a id="pricesNav" href="prices.php">Preise</a></li>
    <!-- ... -->
  </ul>
</body>

ul {list-style:none}
li {display:inline}
a {text-decoration:none}

ul#topNav li a:link,
ul#topNav li a:visited,
ul#subNav li a:link,
ul#subNav li a:visited {background:#b5bfca;color:#1e72c8}

ul#topNav li a:hover,
ul#topNav li a:active,
ul#subNav li a:hover,
ul#subNav li a:active,
body#hotel ul#topNav li a#hotelNav,
body#hotelPrices ul#topNav li a#hotelNav,
body#hotelPrices ul#subNav li a#pricesNav {background:#1e72c8;color:#fff}

Wenn sich der Besucher auf der Unterseite "Preise" befindet, lautet der HTML-Code entsprechend:

<body id="hotelPrices">

[edit] Tipp-Ex [/edit]​

 

[mr-otin]

Hallo Spice, danke für deine bemühungen. Theoretisch funktioniert dein letzter Tip, jedoch mit meinem Jquery Script haut was nicht hin! Und zwar setzt er das current nicht in das jeweilige Li tag. Setze ich es von Hand im Firebug, funktioniert es wie es soll. Ich werd mal im Jquery Forum nachfragen!

Danke für die Hilfe
Dave