Andrea F.: Menü, aktiver Link

Hallo zusammen,

ich habe ein kleines Problemchen mit meinem Navigationsmenü, das folgendermaßen aufgebaut ist:

<div id="navigation">
<ul>
<li><a class="level1" href="foo.html">Erster Eintrag </a></li>
</ul>
<ul>
<li><a class="level1" href="bar.html">Zweiter Eintrag </a></li>
</ul>
</div>

Kann man irgendwie festlegen, dass die class nach dem Klicken (also bei dem aktiven Link) von level1 auf level2 gesetzt wird? Der Grund sind unterschiedliche Eigenschaften der beiden Level. Der aktive Menüpunkt soll etwas anders aussehen (unter anderem ein anderes hintergrundbild). Kann man das mit CSS lösen oder braucht man da vielleicht JS?

  1. hi,

    ich habe ein kleines Problemchen mit meinem Navigationsmenü, das folgendermaßen aufgebaut ist:

    <div id="navigation">
    <ul>
    <li><a class="level1" href="foo.html">Erster Eintrag </a></li>
    </ul>
    <ul>
    <li><a class="level1" href="bar.html">Zweiter Eintrag </a></li>
    </ul>
    </div>

    Kann man irgendwie festlegen, dass die class nach dem Klicken (also bei dem aktiven Link) von level1 auf level2 gesetzt wird?

    Der Klick führt zu einem anderen Dokument [1] - also notiere in diesem Dokument an der Stelle die andere Klasse.

    Der Grund sind unterschiedliche Eigenschaften der beiden Level. Der aktive Menüpunkt soll etwas anders aussehen (unter anderem ein anderes hintergrundbild).

    Nach weit verbreiteter Meinung sollte der aktive Link eigentlich gar kein Link sein [1] - ein Dokument sollte nicht auf sich selbst verweisen, dass verwirrt unerfahrene Nutzer ggf. nur.
    Wenn der Meüpunkt trotzdem auftauchen soll, um die Optik/Struktur des Menüs beizubehalten - dann können <a> und </a> entfallen, und der Text im LI gesondert formatiert werden.

    Kann man das mit CSS lösen oder braucht man da vielleicht JS?

    (X)HTML reicht theoretisch aus [1].

    [1] Es sei denn, du hättest die Nutzung von Frames vergessen zu erwähnen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Der Klick führt zu einem anderen Dokument [1] - also notiere in diesem Dokument an der Stelle die andere Klasse.

      Ich habe das Menü in einer extra Datei, die ich einfach nur einbinde. Also ist es ja immer der selbe Quelltext. Da kann ich es dann ja nicht machen, wenn ich das richtig sehe oder?

      [1] Es sei denn, du hättest die Nutzung von Frames vergessen zu erwähnen.

      Nein, ich verwende keine Frames..

      1. hi,

        Ich habe das Menü in einer extra Datei, die ich einfach nur einbinde. Also ist es ja immer der selbe Quelltext. Da kann ich es dann ja nicht machen, wenn ich das richtig sehe oder?

        Kommt drauf an, wie das "Einbinden" geschieht - ob du dabei eine Scriptsprache nutzt, mit der man auch das dynamisieren könnte.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
      2. Hallo,

        Der Klick führt zu einem anderen Dokument [1] - also notiere in diesem Dokument an der Stelle die andere Klasse.
        Ich habe das Menü in einer extra Datei, die ich einfach nur einbinde. Also ist es ja immer der selbe Quelltext. Da kann ich es dann ja nicht machen, wenn ich das richtig sehe oder?

        Ich habe es bei meiner Seite auch so, also die Navi-Bar ist extern ausgelagert und wird bei mir mittels PHP include eingebunden.
        Falls dich der Code interessiert, den ich benutze, bitteschön:

        <?php  
          $scriptname = $_SERVER['PHP_SELF'];  
          $scriptname = substr($scriptname, 11)  
        ?>  
        <div id="Navigation"><div id="spans">  
          <ul id="menu">  
            <li><a href="./index.php"<?php if($scriptname == 'index.php'){ echo ' class="selected"'; } ?>>Home</a></li>  
            <li><a href="./forum"<?php if($scriptname == 'forum.php'){ echo ' class="selected"'; } ?>>Forum</a></li>  
            <li><a href="./hausaufgaben.php"<?php if($scriptname == 'hausaufgaben.php'){ echo ' class="selected"'; } ?>>Hausaufgaben</a></li>  
            <li><a href="./stundenplan.php"<?php if($scriptname == 'stundenplan.php'){ echo ' class="selected"'; } ?>>Stundenplan</a></li>  
            <li><a href="./termine.php"<?php if($scriptname == 'termine.php'){ echo ' class="selected"'; } ?>>Termine</a></li>  
            <li><a href="./aktuell.php"<?php if($scriptname == 'aktuell.php'){ echo ' class="selected"'; } ?>>Aktuelles</a></li>  
            <li><a href="./steckbrief.php"<?php if($scriptname == 'steckbrief.php' || $scriptname == 'einsteckbrief.php'){ echo ' class="selected"'; } ?>>Steckbriefe</a></li>  
            <li><a href="./kontakt.php"<?php if($scriptname == 'kontakt.php'){ echo ' class="selected"'; } ?>>Kontakt</a></li>  
            <li><a href="./fotogalerie.php"<?php if($scriptname == 'fotogalerie.php' || $scriptname == 'bilder-6klasse.php'){ echo ' class="selected"'; } ?>>Fotogalerie</a></li>  
            <li><a href="./links.php"<?php if($scriptname == 'links.php'){ echo ' class="selected"'; } ?>>Links</a></li>  
          </ul>  
        </div></div>
        

        Das ist meine Basis, noch zur Erklärung: da meine Dateien im Unterverzeichnis /abi10-asg/ liegen, muss ich am Anfang noch das Verzeichnis wegextrahieren, eben durch substr($scriptname, 11).

        Hoffe, ich konnte helfen,
        Willi

        --
        Mein SelfCode: ie:{ fl:| br:> va:) ls:? fo:| rl:? n4:? ss:| de:> js:| ch:? sh:( mo:? zu:}
  2. Hallo,

    Kann man irgendwie festlegen, dass die class nach dem Klicken (also bei dem aktiven Link) von level1 auf level2 gesetzt wird? Der Grund sind unterschiedliche Eigenschaften der beiden Level. Der aktive Menüpunkt soll etwas anders aussehen (unter anderem ein anderes hintergrundbild). Kann man das mit CSS lösen oder braucht man da vielleicht JS?

    kann man per CSS nicht lösen. Ich bin auch lange dem Irrglauben verfallen, daß a:active irgendetwas mit der gerade geöffneten Seite zu tun hat. Aber falsch: a:active ist der Link, der gerade den Focus besitzt und dient der Bedienung über Tastatur (sozusagen das hover für Puristen).

    So etwas geht nur mit JS, oder auch PHP und andere. Einen Link zu einem Beispiel kann ich dir auch geben, allerdings ist daß ein minderqualifiertes Eigenprodukt, da gibt es bestimmt besseres.

    bydey

    --
    -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
    -- Navigate all your PHP web projects with  PHP Project Browser--
    1. Aber falsch: a:active ist der Link, der gerade den Focus besitzt und dient der Bedienung über Tastatur (sozusagen das hover für Puristen).

      Nein, für den Fokus gibt es die Pseudoklasse :focus.

      --
      Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
      Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|