Aktive Seite = Link Button einfärben...

[Dennis]

Hallo...

Aktuell habe ich eine Seite mit "divs" erstellt... soweit alles ganz gut und schön. Jedoch sollten sich die Navigations Button... Wenn man sich z.B. auf der Seite Impressum befindet blau einfärben und so bleiben... solange man auf der Seite ist. Klickt man auf "News" soll News blau eingefärbt sein und Impressum wieder den Ursprungszustand haben. Aktuell sind die Buttons alle weiß und werden bei :

#nav-menu ul li:hover a
 {
 background-color:#b4b4b4;
 text-decoration: underline;
 }

grau... das ist auch ganz nett.. nur wie realisiere ich es, dass der Button blau bleibt, wenn man sich z.B. die Impressum Seite anschaut und beim klicken auf eine andere Seite soll sie wieder weiß werden und der andere Button Blau bleiben. Ich hoffe ihr habt mein Problem soweit verstanden... insgesamt denke ich, dass es recht simpel ist...

dennisneubacher.de <- Die Seite... falls jemand es sich live anschauen will.

Navigation :

<div id="nav-menu">
 <ul>
 <li><a href="index.php?page=news">News</a></li>
 <li><a href="index.php?page=gaestebuch">G&aumlstebuch</a></li>
 <li><a href="index.php?page=entwicklung">Entwicklung</a></li>
 <li><a href="index.php?page=downloads">Downloads</a></li>
 <li><a href="index.php?page=kontakt">Kontakt</a></li>
 <li><a href="index.php?page=impressum">Impressum</a></li>
 </ul>
 </div>

Content wird im DIV so abgefragt :

<?php
    if (isset($_GET["page"]))
      $page = $_GET["page"];
    else
      $page = "news";

    switch ($page)
    {
       case "news":  $file = 'inc/news.inc.php'; break;
       case "gaestebuch":  $file = 'inc/gaestebuch.inc.php'; break;
       case "entwicklung":  $file = 'inc/entwicklung.inc.php'; break;
       case "downloads":  $file = 'inc/downloads.inc.php'; break;
       case "kontakt":  $file = 'inc/kontakt.inc.php'; break;
       case "impressum":  $file = 'inc/impressum.inc.php'; break;
       default: $file = 'inc/content/news.inc.php'; break;
    }

 include "$file";
?>

 

[thuemmy]

Sorry, das war totaler Blödsinn, was da stand

 

[Tronjer]

Oder in das Switch-Case einbauen:

<div id="nav-menu">
 <ul> 
     <li class="<?php echo $news; ?>">
        <a href="index.php?page=news">News</a>
    </li> 
</ul>
 </div>

$news = "";

switch ($page)  {
       case "news":
          $file = 'inc/news.inc.php';
          $news = "active";
           break;
 }

CSS:

.active {
    background: blue;
}

 

[Dennis]

 <?php
        if ($PHP_SELF != "index.php?page=news")
          echo "<li>";
        else
          echo "<li id='aktiv'>";
        ?><a href="index.php?page=news">News</a></li>

#aktiv
{
background-color:black;
}

das habe ich eben probiert... leider ohne erfolg :/ was ist daran falsch?

 

[thuemmy]

ups.. vergiss meine Lösung... ich habe weder das was Du da gepostet hast, noch was ich dann gepostet habe, richtig durchgeguckt.

 

[Dennis]

@tronjer : hab ich eben probiert einzubauen... danach ging die ganze seite nicht mehr... ich glaube ich stelle mich etwas zu dumm an (:

 

[Tronjer]

Was funktioniert denn nicht? Der Grundgedanke war, die Hintergrundfarbe des "aktiven" Buttons in eine CSS-Klasse auszulagern und diese über eine PHP-Variable auszugeben.

 

[Dennis]

Es lädt einfach nichts mehr... nur noch weiß die Seite :/ Vllt habe ich mich auch irgendwo vertippt.. ich probiere es gleich nochmal aus. Diese Lösung funktioniert sicher ja ?

 

[Dennis]

*deleted* doppelpost... dachte meine antwort kam nicht an ... hmpf..

 

[Tronjer]

Klingt nach einem PHP-Fehler.

Error Reporting hast du enabled?

PHP: error_reporting - Manual

 

[Dennis]

Ich hatte vorhin ein ">" vergessen gehabt :( Jedenfalls.. nimmt er jetzt wohl alles an... ich hab das ganze für den ersten Button angepasst (News).

Jedoch keine Veränderung.. der Button wird nach wie vor Blau...


CSS Navi ->

 #nav-menu
 {
 width:57em;
 margin:auto;
 text-align:center;
 }

  .active
 {
 background:blue;
 }

 #nav-menu ul
 {
 list-style: none;
 padding: 0;
 margin: 0;
 }

 #nav-menu li
 {
 float: left;
 background-color:white;
 margin: 0 0.15em;
 color:black;
 }

 #nav-menu li a
 {
 height: 2em;
 line-height: 2em;
 float: left;
 width: 9em;
 display: block;
 border: 0.1em solid blue; <!--#dcdce9-->
 color: #0d2474;
 text-decoration: none;
 }

 #nav-menu ul li:hover a
 {
 background-color:#b4b4b4;
 text-decoration: underline;
 }


 /* Hide from IE5-Mac \*/
 #nav-menu li a
 {
 float: none;
 color:black;
 }
 /* End hide */

Content ->

  switch ($page)
    {
       case "news":
       $file = 'inc/news.inc.php';
       $news = "active";
       break;

Navigation ->

 <li class="<?php echo $active; ?>"><a href="index.php?page=news">News</a></li>

 

[Tronjer]

Wird denn die CSS-Klasse im HTML ausgegeben?

Falls nein, dann deklariere die Variable gleich mit dem richtigen Wert und streiche sie dafür aus dem Switch-Case.

 

[Dennis]

das heißt dann was ?

 

[Tronjer]

Das nennt man Fehlereingrenzung. ;)

Die Variablennamen sollten schon übereinstimmen.

<?php
$news = "active";

<li class="<?php echo $news; ?>"><a href="index.php?page=news">News</a></li>

 

[Dennis]

Hoppla... funzt aber iwie trotzdem nicht.. :/

Navigation.inc.php ->

 <li class="<?php echo $news; ?>"><a href="index.php?page=news">News</a></li>

index.php ->

    switch ($page)
    {
       case "news":
       $file = 'inc/news.inc.php';
       $news = "active";
       break;

style.css ->

  .active
 {
 background-color:blue;
 color:#ffffff;
 }

 

[Tronjer]

iwie == null.

Was genau funktioniert nicht? Die Ausgabe der Klasse im HTML? die Style-Zuweisung per CSS? Hast du es mal so versucht, wie ich es vorigen post geschildert hatte?


Du könntest auch so etwas in den Link schreiben:

<li class="<?php $active = $_GET['page'] === 'news' ? 'active' : ''; echo $active; ?>"><a href="index.php?page=news">News</a></li>

Oder daraus eine foreach Schleife bauen, die alle Listenelemente durchläuft.


Aber etwas Eigeninitiative musst du schon bringen, funzt nicht reicht nicht.