✔ Aktive Links farbig darstellen per CSS

V

vatersbester

Grünschnabel
Hallo Leute,

habe folgendendes Problem:
Ich baue gerade an einer Navigation, bei der ich mit einem hover Effekt arbeite.
Beim überfahren der Navigationspunkte soll sich die Farbe ändern (das funktioniert!) und beim anwählen des jeweiligen Navigationspunktes soll der Link die Hover Eigenschaften behalten.

Dazu benötige ich ja den active Befehl, aber irgendwie mache ich da was falsch, denn es funktioniert nict!

Ich benötige keine visited Funktion, habe diese aber mal vorsichtshalber mit eingebaut und die gleichen Werte wie beim nichtanklicken vergeben!

Der active Befehl soll dem hover Effekt 100% entsprechen!
also einfach nur die gleichen Werte und gleiche Farbe - aber dauerhaft!

Hier ein Auszug aus meiner .css Datei:

------------------------------------------------

.navi2
{
width: 1000px;
height: 32px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #482209;
}

.navi2 a:link
{
font-size: 12px;
color: #482209;
font-weight: bold;
text-decoration: none;
margin-top: 0px;
padding: 5px 8px;
}

.navi2 a:visited
{
font-size: 12px;
color: #482209;
font-weight: bold;
text-decoration: none;
margin-top: 0px;
padding: 5px 8px;
}

.navi2 a:active
{
color: #FFFFFF;
padding: 5px 8px;
}

.navi2 a:hover
{
color: #FFFFFF;
padding: 5px 8px;
}
------------------------------------------------

Ich bin für jede Hilfe dankbar, aber bitte kein Fachchinesisch, da ich kein Profi im programmieren bin!

Danke und Grüße sendet
Vatersbester
 
:active gibt dem Link die Eigenschaften, wenn er gerade geklickt wird. Also solange die Maustaste unten ist. Um dauerhaft die Eigenschaften an den Link zu binden, musst du eine eigene Klasse dafür einführen, z.B.:

Code: 
.active {
  color: #FFF;
  padding: 5px 8px;
}

HTML: 
<a class="navi2 active" href="http://www.tutorials.de/css/...">...</a>
 
Danke für die schnelle Antwort, leider funktioniert as nicht!

Nochmals meine .css Datei mit Änderung:
-----------------------------------------
.navi2
{
width: 1000px;
height: 32px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #482209;
}

.navi2 a:link
{
font-size: 12px;
color: #482209;
font-weight: bold;
text-decoration: none;
margin-top: 0px;
padding: 5px 8px;
}

.navi2 a:visited
{
font-size: 12px;
color: #482209;
font-weight: bold;
text-decoration: none;
margin-top: 0px;
padding: 5px 8px;
}

.navi2 a:active
{
color: #FFFFFF;
padding: 5px 8px;
}

.navi2 a:hover
{
color: #FFFFFF;
padding: 5px 8px;
}


.active
{
color: #FFF;
padding: 5px 8px;
}
-----------------------------------------

uns so habe ich es in meiner Navigation eingebaut, die ich als eigenstänige Datei includiere!
-----------------------------------------

<div>
<a href="site.php?page=1" class="navi2 active">1</a>
<a href="site.php?page=2">2</a>
</div>

-----------------------------------------

Grüße sendet
Vatersbester
 
Grundsätzlich: Webmaster FAQ -> CSS Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben?

Da hier aber offensichtlich keine neue Seite aufgerufen, sondern lediglich die Inhalte dynamisch per PHP im Dokument nachgeladen / ausgetauscht werden, helfen diese CSS-Techniken hier auch nicht weiter, sondern muß ebenfalls per PHP der aktuelle Link im Navigationsmenü hervorgehoben werden.

Beispiel:
PHP: 
<?php
if (!empty($_GET['section']))
    {
        $section=$_GET['section'];
        if ((strpos($section,"index")>-1) || (strpos($section,"http:")>-1) || (strpos($section,"https:")>-1) || (strpos($section,"ftp:")>-1))
            {
                header("Location:index.php");
            }
        else
            {
                include('inc/'.$section.".php");
            }
    }
else
    {
        include("inc/home.php");
    }

?>
PHP: 
<?php
$entries=array('home','news','impressum');
if (isset($_GET['section']))
    {
        $section=$_GET['section'];
    }
else
    {
        $section='home';
    }
$styles=array();
for ($x=0;$x<count($entries);$x++)
    {
        if ($entries[$x]==$section)
            {
                $styles[$entries[$x]]='current';
            }
        else
            {
                $styles[$entries[$x]]='normal';
            }
    }
?>
<ul>
    <li><a href="index.php?section=home" class="<?php echo $styles['home']; ?>">Home</a></li>
    <li><a href="index.php?section=news" class="<?php echo $styles['news']; ?>">News</a></li>
    <li><a href="index.php?section=impressum" class="<?php echo $styles['impressum']; ?>">Impressum</a></li>
</ul>
CSS: 
a.normal { ... }
a.current { ... }
 
Zuletzt bearbeitet:
Hallo spicelab,

vielen Dank, das war genau das was ich gesucht habe!

Habe in der .css Datei folgendes geändert:
--------------------------------
.navi2 a.active
{
color: #FFF;
padding: 5px 8px;
}
--------------------------------

und in der Navigation folgendes:
--------------------------------
<div>
<a href="site.php?page=1"<?php if ($_REQUEST['page'] == '1') echo ' class="active"'; ?>>1</a>
</div>
--------------------------------

Es funktioniert!

Danke für Eure Mühen und Grüße sendet
Vatersbester

Thema kann geschlossen werden!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück