Hauptkategorie in Navi hervorheben, auch wenn Unterkategorie/-punkt aktiv ist

[Steve2010]

Hi Leute,

ich habe folgendes Problem. Die Seite http://www.foto-solutions.de/Visionfood/Website3 hat im horizonatlen Menü den Punkt "Produkte". Dort befinden sich vier Untermenüs.

Aktiviere ich jetzt eines der Untermenüs, wird zwar die Seite korrekt angezeigt (außer bei Sonstige ... - Link nicht aktiv), aber oben der Menüpunkt "Produkte" nicht hervorgehoben. Nehme ich den im Code auf "current", kann ich ihn nicht mehr als Link anklicken.

Ich hätte also folglich gerne die farbliche Hervorhebung von "Produkte", auch wenn ich auf den Unterkategorien/-seiten bin. Der Link "Produkte" sollte dann aber aktiv bleiben. Damit ich jederzeit wieder auf die Produkte-Hauptseite gehen kann.

Habt ihr hier eine Idee?

Viele Grüße
Steve

 

[SpiceLab]

Ich kann mich nur wundern, in welch großer Häufigkeit die Nutzer in der hiesigen CSS-Themenübersicht dem Wichtig ausgezeichneten Thema CSS - FAQ keinerlei Beachtung schenken, geschweige denn zunächst das Webmaster FAQ-Forum aufsuchen, um nach möglichen Beiträgen Ausschau zu halten, die Hilfestellung leisten, bevor sie sich mit ihrer Frage ans Forum wenden, die auch in deinem vorliegenden Fall hier nicht zum ersten Mal im Raume steht

1. Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben? - Neu -

Gleichermaßen wäre dir hier aber auch die foreneigene Suchfunktion bedienlich gewesen, sich zu dem Thema schlau zu machen, denn wie gesagt, das wurde in der Vergangenheit hier schon mehr wie zweimal behandelt, und hält weiterführende Links, sowie Code-Schnipsel bereit.

 

[SpiceLab]

Anstelle des ID-Bezeichners #current empfiehlt sich hier ein Klassenbezeichner .current, da dieser sich gleichzeitig in den Ober- und Untermenüebenen nutzen lässt, was der ID wegen ihrem eindeutigen Vorkommen im Dokumentbaum versagt bleibt, und würde ihn anstelle von <a> im <li>-Tag aufrufen.

Im Falle der "Produkte"-Unterseiten würde das Markup nun so lauten, um den Ober- und Untermenüpunkt (hier Gewürze) in der Navigation hervorzuheben:

<!-- Der Quellcode gilt für Gewuerze.htm -->

<ul>
    <li><a href="index.htm">home</a></li>
    <li><a href="Qualitaet.htm">qualität</a></li>
    <li><a href="Leistungen.htm">leistungen</a></li>
    <li class="current">
        <a href="Produkte.htm">produkte</a>
        <ul><!-- öffnet die Klappnavi von Sortiment -->
                 <li class="current"><a href="/" >gewürze</a></li>
                 <li><a href="Extrakte.htm">extrakte</a></li>
                 <li><a href="Bio-produkte.htm">bio-produkte</a></li>
                 <li><a href="Sonstige_produkte.htm">sonstige produkte</a></li>
        </ul><!-- schließt die Klappnavi von Sortiment -->
    </li>
    <li><a href="Kontakt.htm">kontakt</a></li>
</ul>

... mit der dazugehörigen CSS-Formatierung:

#navbar li a:hover, #navbar li.current a {
        background-color: #e1ffd2;
        color: #2a6e91;
        font-weight: bold;
        font-size: 1.1em;
        }

 

[Steve2010]

Ich kann mich nur wundern, in welch großer Häufigkeit die Nutzer in der hiesigen CSS-Themenübersicht dem Wichtig ausgezeichneten Thema CSS - FAQ keinerlei Beachtung schenken, geschweige denn zunächst das Webmaster FAQ-Forum aufsuchen, um nach möglichen Beiträgen Ausschau zu halten, die Hilfestellung leisten, bevor sie sich mit ihrer Frage ans Forum wenden, die auch in deinem vorliegenden Fall hier nicht zum ersten Mal im Raume steht




Gleichermaßen wäre dir hier aber auch die foreneigene Suchfunktion bedienlich gewesen, sich zu dem Thema schlau zu machen, denn wie gesagt, das wurde in der Vergangenheit hier schon mehr wie zweimal behandelt, und hält weiterführende Links, sowie Code-Schnipsel bereit.

Sorry, aber ich habe, als ich erstmals tutorials.de betreten habe, genau das gelesen. Aber leider bin ich bei weitem noch nicht so tief im Thema bin, wie du. Auch vorab habe ich hierzu gegoogelt und auch forenübergreifend nichts wirklich Brauchbares gefunden.

Von daher kann ich dir nur versichern, der erste Weg geht anstandshalber immer über die eigene Suche.

 

[Steve2010]

Anstelle des ID-Bezeichners #current empfiehlt sich hier ein Klassenbezeichner .current, da dieser sich gleichzeitig in den Ober- und Untermenüebenen nutzen lässt, was der ID wegen ihrem eindeutigen Vorkommen im Dokumentbaum versagt bleibt, und würde ihn anstelle von <a> im <li>-Tag aufrufen.

Im Falle der "Produkte"-Unterseiten würde das Markup nun so lauten, um den Ober- und Untermenüpunkt (hier Gewürze) in der Navigation hervorzuheben:

<!-- Der Quellcode gilt für Gewuerze.htm -->

<ul>
    <li><a href="index.htm">home</a></li>
    <li><a href="Qualitaet.htm">qualität</a></li>
    <li><a href="Leistungen.htm">leistungen</a></li>
    <li class="current">
        <a href="Produkte.htm">produkte</a>
        <ul><!-- öffnet die Klappnavi von Sortiment -->
                 <li class="current"><a href="/" >gewürze</a></li>
                 <li><a href="Extrakte.htm">extrakte</a></li>
                 <li><a href="Bio-produkte.htm">bio-produkte</a></li>
                 <li><a href="Sonstige_produkte.htm">sonstige produkte</a></li>
        </ul><!-- schließt die Klappnavi von Sortiment -->
    </li>
    <li><a href="Kontakt.htm">kontakt</a></li>
</ul>

... mit der dazugehörigen CSS-Formatierung:

#navbar li a:hover, #navbar li.current a {
        background-color: #e1ffd2;
        color: #2a6e91;
        font-weight: bold;
        font-size: 1.1em;
        }

Super Tipp! Vielen Dank. Damit ließ sich das Problem über die Klasse schnell lösen.

Beste Grüße
Steve