✔ Aktiver Link soll angezeigt werden

D

Despoiler

Erfahrenes Mitglied
Ich verstehs einfach nicht was ich falsch mache. Ich hab jetzt schon das Forum rauf und runter gesucht und Google genervt, aber irgendwie steh ich mal wieder auf dem Schlauch.

In meiner Navigation wird alles richtig angezigt. Das Standardbild wenn nichts angeklickt wurde und das Bild, wenn ich mit der Maus darüberfahre.
Das einzige was er nicht anzeigt ist das Bild wenn der Link aktiv ist.

Könnt ihr mir bitte sagen was ich falsch mache?! :eek:

HTML: 
<ul id="navigation">
	<li class="link01"><a href="index.php" title="Startseite"><i>Startseite</i></a></li>
	<li class="link02"><a href="about.php" title="About"><i>About</i></a></li>
	<li class="link03"><a href="portfolio.php" title="Showcase"><i>Showcase</i></a></li>
	<li class="link04"><a href="guestbook.php" title="Gästebucheintrag"><i>Gästebucheintrag</i></a></li>
	<li class="link05"><a href="links.php" title="Linkliste"><i>Linkliste</i></a></li>
	<li class="link06"><a href="contact.php" title="Kontakt"><i>Kontakt</i></a></li>
	<li class="link07"><a href="statistics.php" title="Statistiken"><i>Statistiken</i></a></li>
</ul>

Code: 
/***** NAVIGATION  *******************************************************************************************/
#navigation 			{width:194px; height:150px; padding-top:22px;}
#navigation li 			{width:194px; height:25px; float:left;}
#navigation li.link01 		{margin-top:24px;}
#navigation li a 		{width:194px; height:25px; display:block; float:left;}
#navigation li.link01 a 	{background:url(../images/navi_home.gif) no-repeat 0 0;}
#navigation li.link02 a 	{background:url(../images/navi_about.gif) no-repeat 0 0;}
#navigation li.link03 a 	{background:url(../images/navi_portfolio.gif) no-repeat 0 0;}
#navigation li.link04 a 	{background:url(../images/navi_guests.gif) no-repeat 0 0;}
#navigation li.link05 a 	{background:url(../images/navi_links.gif) no-repeat 0 0;}
#navigation li.link06 a 	{background:url(../images/navi_contact.gif) no-repeat 0 0;}
#navigation li.link07 a 	{background:url(../images/navi_stats.gif) no-repeat 0 0;}
#navigation li a:hover  	{background-position:0 50%;}
#navigation li.active a		{background-position:0 100%;}
#navigation li.active a:hover	{background-position:0 100%;}
 
Hi,

zeichne im HTML-Code der einzelnen Projektseiten den jeweils aktiven Menüpunkt mit einem ID-Bezeichner aus (hier: #current), und regel über den entsprechenden CSS-Selektor die Regel.

Code: 
<li class="link01" id="current"><a href="index.php" title="Startseite"><i>Startseite</i></a></li>
Code: 
#navigation li#current a { ... }


Eine weitere Möglichkeit zur technischen Umsetzung stellt der Artikel Highlighting current page with CSS vor.

mfg Maik
 
Hallo Maik,

sei mir bitte nicht böse, ich versteh dich nicht!
Wozu brauch ich denn den zusätzlichen ID-Bezeichner?

Kannst du es mir vielleicht ganz ausführlich erklären? :eek:
 
Was ist denn daran so schwer zu verstehen?

Auf irgendeine Weise muß schliesslich der aktive Menüpunkt von den übrigen "spezifiziert" werden, und das ist derzeit in deinem vorgestellten Markup nicht gegeben.

mfg Maik
 
Ja was würde denn in dem current zum Beispiel stehen müssen?

Ich glaub, ich brauch nur nen Stoß in die richtige Richtung.
 
Also, ich zeig dir mal die Vorgehensweise für die ersten beiden Seiten:

Code: 
<!-- Startseite -->
<ul id="navigation">
	<li class="link01" id="current"><a href="index.php" title="Startseite"><i>Startseite</i></a></li>
	<li class="link02"><a href="about.php" title="About"><i>About</i></a></li>
	<li class="link03"><a href="portfolio.php" title="Showcase"><i>Showcase</i></a></li>
	<li class="link04"><a href="guestbook.php" title="Gästebucheintrag"><i>Gästebucheintrag</i></a></li>
	<li class="link05"><a href="links.php" title="Linkliste"><i>Linkliste</i></a></li>
	<li class="link06"><a href="contact.php" title="Kontakt"><i>Kontakt</i></a></li>
	<li class="link07"><a href="statistics.php" title="Statistiken"><i>Statistiken</i></a></li>
</ul>
Code: 
<!-- About -->
<ul id="navigation">
	<li class="link01"><a href="index.php" title="Startseite"><i>Startseite</i></a></li>
	<li class="link02" id="current"><a href="about.php" title="About"><i>About</i></a></li>
	<li class="link03"><a href="portfolio.php" title="Showcase"><i>Showcase</i></a></li>
	<li class="link04"><a href="guestbook.php" title="Gästebucheintrag"><i>Gästebucheintrag</i></a></li>
	<li class="link05"><a href="links.php" title="Linkliste"><i>Linkliste</i></a></li>
	<li class="link06"><a href="contact.php" title="Kontakt"><i>Kontakt</i></a></li>
	<li class="link07"><a href="statistics.php" title="Statistiken"><i>Statistiken</i></a></li>
</ul>


Deinem CSS-Code zufolge müsste die Regel dann so lauten:

Code: 
#navigation li#current a, #navigation li#current a:hover  { background-position:0 100%;}


mfg Maik
 
Ah jetzt weiß ich was du meinst!

Dann hab ich das nächste Problem. Ich arbeite mit Templates, ich kann also nicht jede Seite einzeln mit der ID ausstatten, da ich nur eine header.tpl habe.
 
Mit anderen Worten, das Menü existiert nur einmal, und wird in die einzelnen Seiten geladen?

Entweder greifst du dann auf meinen empfohlenen Artikel zurück, der sich auch für diese Konstellation eignet, oder du mußt eine client- oder serverseitige Scriptsprache hinzuziehen, um den aktiven Link im Menü entsprechend auszuzeichnen.

mfg Maik
 
Vergangenes Jahr hab ich da mal für einen anderen Benutzer ein Beispiel erstellt, in dem ein Menü mittels [phpf]include[/phpf] in diverse Seiten geladen wird, und bei ihrem Aufruf der entsprechende Menüpunkt optisch hervorgehoben wird.

Die Technik basiert ebenfalls auf dem eingangs empfohlenen Artikel.

Vielleicht kannst du ja damit was anfangen.

lg Maik
 

Anhänge

Danke Maik, ich hab mir jetzt mal die Möglichkeit von dir angeschaut und bin dabei auf eine weitere Idee gestoßen.

Ich könnte doch in der jeweiligen php-Datei eine Variable übergeben.

Zum Beispiel die portfolio.php:

PHP: 
$section = 1;
$smarty->assign('sec',$section);

HTML: 
<ul id="navigation">
	<li class="link01" {if $sec == 1}id="current_01"{/if}><a href="index.php" title="Startseite"><i>Startseite</i></a></li>
	<li class="link02" {if $sec == 2}id="current_02"{/if}><a href="about.php" title="About"><i>About</i></a></li>
	<li class="link03" {if $sec == 3}id="current_03"{/if}><a href="portfolio.php" title="Showcase"><i>Showcase</i></a></li>
	<li class="link04" {if $sec == 4}id="current_04"{/if}><a href="guestbook.php" title="Gästebucheintrag"><i>Gästebucheintrag</i></a></li>
	<li class="link05" {if $sec == 5}id="current_05"{/if}><a href="links.php" title="Linkliste"><i>Linkliste</i></a></li>
	<li class="link06" {if $sec == 6}id="current_06"{/if}><a href="contact.php" title="Kontakt"><i>Kontakt</i></a></li>
	<li class="link07" {if $sec == 7}id="current_07"{/if}><a href="statistics.php" title="Statistiken"><i>Statistiken</i></a></li>
</ul>

Das könnte doch funktionieren, oder?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück