+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: CSS und Javascript (https://forum.juergens-workshops.de/forumdisplay.php?fid=86)
+--- Thema: Navi Button "aktiv" auf aktueller Seite (/showthread.php?tid=23394)
Navi Button "aktiv" auf aktueller Seite - Seramis - 09.08.2007
Hallo,
ich mal wieder.
Suche für mein CSS eine einfache Lösung, das der NaviButton der gerade besuchten Seite die Farbe (Button-gif) des Hovers behält.
Wie immer würd ich nich fragen wenn ich nicht schon gesucht und probiert hätte, und es ist bestimmt wieder nur der Wald und die Bäume :haue: ;-)
Meine simple Navi ist dies:
Code:
#navigation {
width: 166px;
margin: 10px;
text-align: center;
position:absolute;
width:166px;
height:65px;
z-index:1;
left: 1%;
top: 180px;
}
#navigation li a {
height: 32px;
height: 25px;
text-decoration: none;
}
#navigation li a:link, #navigation li a:visited {
color: #333;
display: block;
background: url(bilder/menu14b.gif);
padding: 8px 0 0 10px;
}
#navigation li a:hover {
color: #FFF;
background: url(bilder/menu14b.gif) 0 -32px;
padding: 8px 0 0 10px;
}Ich werd mich nie mit CSS wirklich anfreunden obwohl es so "schön" ist *g
Navi Button "aktiv" auf aktueller Seite - Helmut - 09.08.2007
Hi,
es gibt bei den Links auch den Status a:focus und a:active, evtl kannst Du damit was machen http://www.juergens-workshops.de/service/selfhtml811/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active
Ansonsten ist es meist einfacher dies per PHP zu erledigen (auch schön, aber man muss viel lernen) ;-)
Ich meine damit das Du das Menü dynamisch erstellst und den Links dann die entsprechende CSS Class zuweist. So wie in dem schnell gestrickten Beispiel: http://www.inspire-net.de/abc
Die PHP Dateien Seite index.php und seite2.php:
PHP-Code:
<?php
error_reporting(E_ALL & ~E_NOTICE);
define('ROOT_PFAD', './');
require_once ROOT_PFAD . "menue.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Seite 1</title>
</head>
<body>
<div id="inhalt">
<?php echo get_menue('index'); ?>
</div>
</body>
</html>
PHP-Code:
<?php
error_reporting(E_ALL & ~E_NOTICE);
define('ROOT_PFAD', './');
require_once ROOT_PFAD . "menue.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Seite 2</title>
</head>
<body>
<div id="inhalt">
<?php echo get_menue('seite2'); ?>
</div>
</body>
</html>
Die menue.php
PHP-Code:
<?php
function get_menue($seite) {
$menuedaten = array(
'index' => 'Startseite',
'seite2' => 'Andere Seite'
);
while(list($key, $val) = each($menuedaten)) {
if ($key != $seite) {
$menuelinks .= "<a href=\"$key.php\">$val</a>";
} else {
$menuelinks .= "<div class=\"aktuell\">$val</div>";
}
}
return $menuelinks;
}
?>Vorteil, bei einer neuen Seite musst Du nur das Menü in der menue.php erweitern... alles andere geht automatisch.
Cu Helmut
Navi Button "aktiv" auf aktueller Seite - Seramis - 13.08.2007
Danke dir Helmut!
Das mit dem php werd ich mal ausprobieren wenn mein Kopf wieder aufnahmefähig ist für was Neues. :kruecke:
Jetzt hab ich mir erstmal schnell selbst anders geholfen, indem ich der aktiven Seite einfach den Hover Button "entzogen" habe
Komische Lösung, aber so gehts auch.... :oops:;-)
Navi Button "aktiv" auf aktueller Seite - prm - 13.08.2007
Für die Seite, die jeweils geöffnet ist bildest du einen eigenen div.
Das ist hier sehr gut beschrieben.
Bei einer mit PHP includeten Navi findest du hier eine Anleitung.
Navi Button "aktiv" auf aktueller Seite - Helmut - 13.08.2007
@Seramis,
ich hab zu dem Thema bei mir auch einen recht umfangreichen Workshop geschrieben. http://www.inspire-world.de/readartikel.php?aid=17
Damit der Kopf immer gut gefüllt ist
Cu Helmut
Navi Button "aktiv" auf aktueller Seite - Seramis - 14.08.2007
Danke euch!
@prm
so (ähnlich) hab ichs auch gelöst, dem jeweiligen butten eine eigene <li id> zugewiesen.
Nur war bei meinen ersten Versuchen irgendetwas "dominant", so dass es nicht funktionierte.
Ich habs nur umständlicher im css geschrieben...werd grad mal ausprobieren ob ich das aus dem Beispiel bei mir hinbekomme.
@ Helmut
ähm tja, sprach der Wissende zu dem Unwissenden: "geh lernen und üben " *loooool*
ich kann doch nich aaaaaaaaaaalles auf einmal in meinen blondschopf reinpauken :tease: