XHTMLforum - separate navigation > css

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - separate navigation > css > aktiver Link? (http://xhtmlforum.de/showthread.php?t=41314)

separate navigation > css > aktiver Link?

Hallo

bei http://www.thestyleworks.de/tut-art/listnav2.shtml

wird wunderbar gezeigt, wie man Listen-Navigationen erstellen kann. Insbesondere auch, wie man es anstellt, damit der aktive Link in der Navigation angezeigt wird.

Mein Problem ist jetzt aber, dass ich meine Navigation in einer separaten Datei haben möchte und auf allen Seiten einbinde. Ich will die Navigationsänderungen ja nicht jedesmal auf allen Seiten ändern!

Frage: gibt es trotzdem mit css eine Möglichkeit, den Link aus so aktiv anzuzeigen? Oder muss man das anders machen? Mit Javascript?

Danke für Eure Tipps!
Oli

hi,

wenn ich das alles richtig verstehe hasst du das gleiche Problem wie in dem Beitrag hier, vielleicht kommt ja auch die gleiche Lösung in Frage.

CSS Menü auslagern

Hallo

ja, danke, das könnte es sein! Ich versuch es mal aus...

Gruss
Oliver

Hat es bei Dir geklappt? Bei mir nicht. Hier mal den Code der hmt-Datei und die css-Infos:

...................

1. Testdatei

Code:

<body>

<?php

include('testnav.php');

?>



<br /><br /><br /><br /><br /><br /><br /><br />





Seite 1



</body>

...................

2. Navigation

Code:

<div id="navigation">

<ul>

<li<? if ($nav == 1) echo " class='aktiv'"; ?>><a href="test1.php">Test1</a></li>

<li<? if ($nav == 1) echo " class='aktiv'"; ?>><a href="test2.php">Test2</a></li>

<li><a href="">xx</a></li>

<li><a href="">yy</a></li>

</ul>

</div>

....................

3. die css-Datei

Code:

body {

   font-size: 15px;

   color: #000;

   background-color: #393;

   padding: 0;

   margin: 0;

   }



#maincontent {

   background-color: #f6ffff;

   padding: 1em;

   border-left: 1px solid #909;

   margin: 0 0 0 174px;

   }



#navigation {

   position: absolute;

   top: 7px;

   left: 7px;

   }

 

#navigation ul {

   padding: 0;

   margin: 0;

   }

 

#navigation li {

   padding: 0;

   margin: 0;

   list-style: none;

   width: 168px;

   }

   

#navigation li a {

   background-color:#FF9900;

   }



#navigation li a:hover, #navigation  li a.aktiv {

   background-color:#99FF66;

   }

        

#navigation a {

   font: bold 1em sans-serif;

   text-decoration: none;

   display:block;

   padding: 3px 4px;

   border: 1px solid #909;

   margin: 2px 0 0 10px;

   width: 148px;

   }

Wo liegt der Haken?

Danke für die Hilfe!
Oliver

es gibt da auch eine einfachere möglichkeit:

dem body und den einzelnen menüpunkten eine id zuweisen, wobei der body immer eine zur aktuellen seite/sektion/etc passende hat

z.B.:
HTML

Code:

<body id="test2">

<ul>

  <li id="menu_test1">....</li>

  <li id="menu_test2">....</li>

  <li id="menu_test3">....</li>

</ul>

</body>

CSS:

Code:

body#test1 #menu_test1 {

   background-color:#99FF66;

}

body#test2 #menu_test2 {

   background-color:#99FF66;

}

body#test3 #menu_test3 {

   background-color:#99FF66;

}

du musst die $nav auch mit inhalt füllen wie mit index.php?nav=1

Zitat:

Zitat von daro

es gibt da auch eine einfachere möglichkeit:

dem body und den einzelnen menüpunkten eine id zuweisen, wobei der body immer eine zur aktuellen seite/sektion/etc passende hat

z.B.:
HTML

Code:

<body id="test2">

<ul>

  <li id="menu_test1">....</li>

  <li id="menu_test2">....</li>

  <li id="menu_test3">....</li>

</ul>

</body>

CSS:

Code:

body#test1 #menu_test1 {

   background-color:#99FF66;

}

body#test2 #menu_test2 {

   background-color:#99FF66;

}

body#test3 #menu_test3 {

   background-color:#99FF66;

}

danke für den Tipp! Allerdings möchte ich die Navigation auslagern, weil ich diese, wenn ich sie mal ändere (ich meine die Links oder weil ich sie erweitere) nicht auf jeder Seite erweitern möchte.

Von daher geht dieser Vorschlag von Dir nicht oder?

ich hab nicht verstanden wie Du das meinst. Kannst Du mir ein Beispiel machen. Vermutlich ist das aber der richtige Weg - via $php...

Danke für die Hilfe!

Am einfachsten machst du es, wenn du die navigation per php includest und auf jeder Seite dann eine andere Zahl an die Variable xyz übergibst.

Z.b.
html file, an der stelle wo das menü erscheinen soll

Code:

<?php

$menu = 2;



include('testnav.php');

?>

menu.inc

Code:

<div id="navigation">

<ul>

<li<? if ($nav == 1) echo " class='aktiv'"; ?>><a href="test1.php">Test1</a></li>

<li<? if ($nav == 2) echo " class='aktiv'"; ?>><a href="test2.php">Test2</a></li>

<li><a href="">xx</a></li>

<li><a href="">yy</a></li>

</ul>

</div>

In diesem Fall wäre der Link "Test 2" aktiv da "menu = 2" gesetzt wurde bevor das menu per include eingebunden wird. (unter der voraussetzung es gibt ne klasse die aktiv heisst :) )

Hoffe damit kommst etwas weiter.

Hallo Optimax

perfekt!

Vielen Dank
Oliver