Navigation

[memento]

Ich bin mir nicht sicher, ob dieser Themenbereich der Richtige dafür ist.

Bei dieser Seite möchte ich gerne bei der Navigation, wenn zB der Punkt "Über uns" aktiv ist, dass die Ausbuchtung - wie während des Hover-Vorgangs - stehen bleibt.

Foto zur Veranschaulichung:




Mit was baue ich das auf?
Unter was soll ich suchen?

DANKE!


- - - - - - - - - - - - - - - - - - - - -
Der derzeitige Aufbau

       <div>    
            <ul class="menue">
                <li><a href="index.php?go=idee"><img  src="http://www.html.de/images/idee.png" alt="IDEE"  /></a></li>
                <li><a href="index.php?go=wir"><img  src="http://www.html.de/images/ueber_uns.png" alt="ÃœBER UNS"  /></a></li>
                <li><a  href="index.php?go=teilnehmen"><img  src="http://www.html.de/images/teilnehmen.png" alt="TEILNEHMEN"  /></a></li>
                <li><a  href="index.php?go=rueckschau"><img  src="http://www.html.de/images/rueckschau.png" alt="RÃœCKSCHAU"  /></a></li>
                <li><a href="index.php?go=netzwerk"><img  src="http://www.html.de/images/netzwerk.png" alt="NETZWERK"  /></a></li>
                <li><a href="index.php?go=contact"><img  src="http://www.html.de/images/kontakt.png" alt="KONTAKT"  /></a></li>
            </ul>
        </div>

ul.menue { display: inline; } /* Breite muss noch angepasst werden */
ul.menue  li { background: #e00079 ; color: #FFF ; float: left ;  list-style-type: none ; text-align: center ;  font-size: 0.9em; }
ul.menue  li a { color: #FFF ; text-decoration: none ; display: block ;  width: 125px ; height: 25px ; line-height: 25px ; font-weight: bold ; }   /* Breite und Höhe eines Menüpunktes */
ul.menue  li:hover a { border-bottom: 7px solid #e00079 ; } /* Ausbuchtung unten */

 

[Wustersoss]

Du must dem Listenelement welches gerade auf die Seite verweist, die angezeigt wird, eine Klasse geben und entsprechend deinen Vorstellungen dekorieren.

Zum Beispiel so

/* CSS */

ul.menue  li.aktiv { }

Wenn die Seite "über uns" angezeigt wird, muss dein ausgelieferter Quellcode so aussehen:

<div>    
            <ul class="menue">
                <li><a href="index.php?go=idee"><img  src="http://www.html.de/images/idee.png" alt="IDEE"  /></a></li>
                <li class="aktiv"><a href="index.php?go=wir"><img  src="http://www.html.de/images/ueber_uns.png" alt="ÃœBER UNS"  /></a></li>
                <li><a  href="index.php?go=teilnehmen"><img  src="http://www.html.de/images/teilnehmen.png" alt="TEILNEHMEN"  /></a></li>
                <li><a  href="index.php?go=rueckschau"><img  src="http://www.html.de/images/rueckschau.png" alt="RÃœCKSCHAU"  /></a></li>
                <li><a href="index.php?go=netzwerk"><img  src="http://www.html.de/images/netzwerk.png" alt="NETZWERK"  /></a></li>
                <li><a href="index.php?go=contact"><img  src="http://www.html.de/images/kontakt.png" alt="KONTAKT"  /></a></li>
            </ul>
        </div>

 

[Tronjer]

Um die Klasse dynamisch zuordnen zu können, sollte das so notiert sein:

.......
<li  class="<?php if ($_GET['go'] == 'wir') echo 'aktiv'; ?>" ><a href="index.php?go=wir"><img src="http://www.html.de/images/ueber_uns.png" alt="ÜBER UNS" /></a></li>
.....

 

[memento]

@ Wustersosshttp://www.html.de/members/wustersoss/
@ Tronjer


Ergänzen sich eure Beiträge oder sind das 2 verschiedene Lösungsansätze?

Wichtig ist, dass der Hover (Ausbuchung unten) weiterhin funktioniert, bei onclick auf einen Menüpunkt jedoch "einfriert".

 

[threadi]

Die beiden Antworten ergänzen sich. Erst ist die Antwort in Bezug auf CSS formuliert, danach in Bezug auf PHP da Du deinen Beitrag im PHP-Bereich geschrieben hast. Beides zusammen umgesetzt ist die Antwort auf deine Frage.

 

[Tronjer]

@ Wustersoss
@ Tronjer


Ergänzen sich eure Beiträge oder sind das 2 verschiedene Lösungsansätze?

Wichtig ist, dass der Hover (Ausbuchung unten) weiterhin funktioniert, bei onclick auf einen Menüpunkt jedoch "einfriert".

Der Lösungsansatz hier lautet, zwei unterschiedliche Zustände zu definieren, nennen wir sie mal Standard und Aktiv. Der Standardzustand beschreibt die CSS-Attribute, welche du in der Klasse .menu definiert hast. Diese Attribute sollen im aktiven Modus durch eine weitere angehängte Klasse (.aktiv) überschrieben werden.

Damit PHP zwischen den beiden Zuständen unterscheiden kann, muss eine entsprechende Bedingung festgelegt werden. Dazu hängst du an die URL der Links, abgetrennt durch ein Fragezeichen, sogenannte Parameter an, die dann in der Adresszeile des Browsers erscheinen und von PHP in der superglobalen Variablen $_GET als Array gespeichert werden. Ob diese Parameter nun go=wir oder foo=bar heißen, ist prinzipiell egal, solange du die Syntax einhältst.

Im nächsten Schritt wird mittels einer Kontrollstruktur ( if(){} ) der Inhalt von $_GET abgefragt und basierend darauf die Entscheidung getroffen, ob die CSS-Klasse .aktiv dem List-Element zugewiesen werden soll.

 

[memento]

@ Tronjer

Danke, für deine detailierte Erklärung!
Hinter PHP stecken ja lauter tolle Sachen, von denen ich noch nichts wusste...