Guten abend, liebe Leute!

Ich bin gerade dabei die Seite von dem Reiterhof meiner Schwester zu überarbeiten. Für die Navigation habe ich mir überlegt, dass es drei Stadien eines Button geben soll: Normal, Over und Active. Bis jetzt habe ich alles recht gut mit der Hilfe von Dreamweaver hinbekommen.

Nur habe ich ein Problem: Auf der Test-Seite die ich erstellt habe funktioniert es wunderbar.
(Bsp.: http://www.reiterhof-witzenhausen.de/rhw/test.php)

Wenn ich nun versuche die gleiche Funktion mit der gleichen Struktur auf die richtige Seite anzuwenden, funktioniert zwar der Over-Effekt aber nicht der Active.
(Bsp.: http://www.reiterhof-witzenhausen.de/rhw/

Ich hoffe Ihr konntet mein Problem verstehen und könnt mir helfen.
Vielen Dank, Vianney

In deinem Testfall funktioniert es deshalb nur, da die Seite nicht gewechselt wird. Im zweiten Fall wird jedoch die Seite gewechselt. Und damit geht auch die clientseitige Information – denn JavaScript ist clientseitig – des „aktiven“ Verweises verloren.

Hallo Gumbo.
Vielen Dank für deinen Tipp, soetwas hatte ich mir auch schon überlegt, weil ich die Seite include...aber deine Idee ist logischer .
Kannst du mir sagen wie ich dieses Problem umgehen kann?

Vielen Dank, Vianney

Es gibt unterschiedliche Methode, allerdings würde ich das Ganze erst einmal mit CSS aufziehen:

HTML-Code:

<ul id="nav-main">
	<li id="nav-main-item-1"><a href="http://www.reiterhof-witzenhausen.de/rhw/index.php?section=home"><span>Home</span></a></li>
	<li id="nav-main-item-2"><a href="#"><span>Wir über uns</span></a></li>
	<li id="nav-main-item-3"><a href="#"><span>Angebote</span></a></li>
	<li id="nav-main-item-4"><a href="#"><span>Bilder</span></a></li>
	<li id="nav-main-item-5"><a href="#"><span>Termine und Preise</span></a></li>
	<li id="nav-main-item-6"><a href="#"><span>Anmeldung</span></a></li>
	<li id="nav-main-item-7"><a href="#"><span>Kontakte</span></a></li>
	<li id="nav-main-item-8"><a href="#"><span>Anreise</span></a></li>
	<li id="nav-main-item-9"><a href="#"><span>Gästebuch</span></a></li>
	<li id="nav-main-item-10"><a href="#"><span>Downlaods</span></a></li>
	<li id="nav-main-item-11"><a href="#"><span>Links</span></a></li>
	<li id="nav-main-item-12"><a href="#"><span>Drachenhöhle</span></a></li>
	<li id="nav-main-item-13"><a href="#"><span>Impressum</span></a></li>
</ul>

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

#nav-main {     list-style:     none; } #nav-main li {     display:        inline; } #nav-main a {     float:          left;     display:        block;     height:         14px; } #nav-main a span {     display:        none; } #nav-main-item-1 a {     width:          28px;     background-image:   url([url]http://www.reiterhof-witzenhausen.de/rhw/grafiken/nav/home_off.gif[/url]); } #nav-main-item-1 a:hover {     background-image:   url([url]http://www.reiterhof-witzenhausen.de/rhw/grafiken/nav/home_on.gif[/url]); } …

Zur Darstellung des aktuellen Verweises gibt es – wie bereits erwähnt – mehrere Methoden. Die meisten basieren jedoch auf der Unterstützung eines serverseitigen Skriptes.
Eine Möglichkeit wäre beispielsweise den aktuellen Verweis mit einem zusätzlichen class-Attribut auszuzeichnen. Eine andere wäre, dem gesamten Dokument eine ID zuzuweisen und die Darstellung mittels geschickter Nutzung der Selektoren zu realisieren.

Vielen Dank erstmal an Gumbo.
Bei der Verwendung dieser Variante tun sich mir nocheinmal zwei Fragen auf.

1. Kann ich bei dieser Art der Gestaltung, auch eine absolute Positionsangabe verwenden?

2. Bei dem Code den du mir hier netterweise zur Verfügung gestellt hast, ist der Normal-Effekt und der Over-Effekt definiert. Ich habe versucht das ganze wie folgt zu erweitern, da ich hauptsächlich wollte, dass der Button auf den man zuletzt geklickt hat, aktiv bleibt.

Code :

1 2 3

#nav-main-item-1 a:hover {     background-image:   url(grafiken/nav//home_on.gif); }

Vielen Dank, Vianney

Kann ich bei dieser Art der Gestaltung, auch eine absolute Positionsangabe verwenden?

Sicher kann das Navigationsmenü auch noch positioniert werden.

Und wie bereits gesagt, wird zur Darstellung des aktiven Verweises die Unterstützung einer serverseitige Skriptsprache nötig sein.

Das heißt, dass ich mir ein Skript in PHP suchen bzw. erstellen muss? Oder die Navi in ein Frame packe, wobei ich von Frames nur selten gutes höre.

Trotzdem Danke, Vianney

P.S.: Wie machen des die Leute auf dieser Seite? http://www.dr-bahr.com/

EDIT: Hab grad gesehen, die benutzen auch Frames. Also heioßt es für mich Frames oder PHP Skript?

Hallo.
Ich habe es jetzt ganz anders gemacht. Zuerst habe ich jeder Seite eine eigene Navigation geamacht, d.h.: Wenn man auf Home geht, wird die Navigation von "Home" geladen. Bei der Navigation "Home" ist der Hom-Button Aktiv und der rest ist standartmäßig mit einem RollOver-Effekt ausgestattet. Wenn man auf "Wir über uns" klickt, wird die Navi von "Wir über uns" geladen, bei welcher der Wir über uns-Button Aktiv ist.....usw

Hat einer noch ne bessere idee?

Trotzdem nochmals vielen Dank, Vianney

Wie bereits erwähnt, könnte ein serverseitiges Skript anhand eines Parameters überprüfen, welche Seite ausgewählt wurde und das Dokument dementsprechend anpassen. Damit wäre auch nur ein zentral verwaltbares Navigationsmenü erforderlich.

Es tut mir leid wenn ich jetzt nerve, aber ich verstehe recht wenig von PHP und habe keinen blassen Schimmer, wie ich soetwas anstellen sollte. Für Hilfe oder ein Tutorial bzw. Link wäre ich sehr Dankbar.

Vianney

Damit das Skript erst einmal weiß, welche Inhalte geladen werden sollen, muss erst einmal ein Parameter übergeben werden – diesen Ansatz besitzt deine Website bereits (?section=<Bezeichner>). Anhand dieses Bezeichners ist es nun möglich ein Skript wie folgt zusammenzusetzen:

PHP-Code:

<?php

    $sections = array(
        array('Home', 'home'),
        array('Wir über uns', 'wirueberuns'),
        array('Angebote', 'angebote'),
        …
    );

    echo '<ul id="nav-main">';
    foreach( $sections as $key => $item ) {
        echo '<li id="nav-main-item-'.($key+1).'"><a href="?section='.$item[1].'"'. ( (isset($_REQUEST['section']) && $_REQUEST['section']==$item[1]) ? ' class="active"' : '' ) .'><span>'.$item[0].'</span></a></li>';
    }
    echo '</ul>';

?>

Dieses könntest du nun mithilfe der include()-Anweisung in den entsprechenden Position des PHP-Skriptes einbinden.

Es tut mir wirklich sehr leid, aber ich verstehe nur Bahnhof. Es würde mich sehr freuen, wenn du dieses Skript noch ein wenig mehr erläutern könntest oder mir nochmal ein Beispiel zeigen könntest.

Nochmals Sorry. Vianney

Das Skript ist nicht sonderlich kompliziert: Zuerst werden alle Navigationseinträge mit URL und Beschriftung in der $sections-Variable in Form von Arrays hinterlegt. Danach wird das Navigationsmenü anhand des Arrays erstellt. Handelt es sich bei dem derzeit verarbeiteten Eintrag um die aktuelle Seite, bekommt das Navigationselement ein zusätzliches class-Attribut, über welches das Element später mit CSS zur Formatierung ausgewählt werden kann.

Du glaubst gar nicht wie peinlich mir das ist . Aber ich verstehe echt nix. Könntest du mir Anhand eines Buttons genau zeigen wie das ganze auszusehen hat?

Ich wäre dir wirklich sehr dankbar, weil das Projekt bis Freitag fertig sein muss.

Vianney

Du musst einfach nur alle möglichen Sektionen in dem $sections-Array notieren. Und zwar nach folgendem Schema:

Code :

1 2 3 4 5 6

$sections = array(     array('[i]<Sektionsbezeichner 1>[/i]', '[i]<Sektionsparameter 1>[/i]'),     array('[i]<Sektionsbezeichner 2>[/i]', '[i]<Sektionsparameter 2>[/i]'),     array('[i]<Sektionsbezeichner 3>[/i]', '[i]<Sektionsparameter 3>[/i]'),     … );

Einen möglichen Anfang dieser Notierung ist in meinem vorherigen Beitrag zu sehen. Mehr brauchst du nicht zu ändern, den Rest erledigt das Skript selbst. Du musst es nur noch an der entsprechenden Position des index.php-Skriptes einfügen.


Achja: Natürlich muss die Ausgabe nachher noch mit CSS und den Grafiken formatiert werden.