[HTML/CSS] Frage: Navigation Hover/Selected/Selected Hover

Hydrox · 08/28/2010, 16:18

Hallo zusammen.
Ich bin gerade dabei ein Wordpress Layout umzusetzen
und habe in Photoshop eine schicke Navigation gebastelt.
Ich habe 5 Navipunkte, jedoch soll später im design unterschieden werden zwischen: Normal, Hover, Selected und Selected Hover.
Einen einfachen Hovereffekt konnte ich ganz einfach erzeugen mit:

Code:

<a href="http://lalala.lala/"><img src="http://localhost/wordpress/wp-content/themes/eskapism/images/home.png"></a> 
<img src="http://localhost/wordpress/wp-content/themes/eskapism/images/home.png" onmouseover="this.src='http://localhost/wordpress/wp-content/themes/eskapism/images/homeh.png'" onmouseout="this.src='http://localhost/wordpress/wp-content/themes/eskapism/images/home.png'"/>

Wie bekomme ich es nun hin, dass bei selektiertem Menüpunkt sich auch das Design des selben ändert? (Habe die Bilder dafür natürlich schon gesliced aber da ich der totalste Leihe bin komme ich an dieser Stelle nicht weiter.. =[ )

Danke schonmal

kennyo · 08/28/2010, 17:10

Quote:
Originally Posted by Hydrox
Hallo zusammen.
Ich bin gerade dabei ein Wordpress Layout umzusetzen
und habe in Photoshop eine schicke Navigation gebastelt.
Ich habe 5 Navipunkte, jedoch soll später im design unterschieden werden zwischen: Normal, Hover, Selected und Selected Hover.
Einen einfachen Hovereffekt konnte ich ganz einfach erzeugen mit:
Code:
<a href="http://lalala.lala/"><img src="http://localhost/wordpress/wp-content/themes/eskapism/images/home.png"></a> 
<img src="http://localhost/wordpress/wp-content/themes/eskapism/images/home.png" onmouseover="this.src='http://localhost/wordpress/wp-content/themes/eskapism/images/homeh.png'" onmouseout="this.src='http://localhost/wordpress/wp-content/themes/eskapism/images/home.png'"/>
Wie bekomme ich es nun hin, dass bei selektiertem Menüpunkt sich auch das Design des selben ändert? (Habe die Bilder dafür natürlich schon gesliced aber da ich der totalste Leihe bin komme ich an dieser Stelle nicht weiter.. =[ )

Danke schonmal

kA was du mit selected und selected hover meinst, aber in CSS gibt es nur link, visited, active und hover.
Wenn ich es richtig verstanden habe willst du die Linkfarbe des Links von der Seite auf der du dich grade befindest andersfarbig haben. Das geht mit reinem CSS allerdings nicht.

Und für einen normalen Hover mach es am besten direkt komplett mit CSS.

Deine Navi würde ca. so aussehen:

Code:

<div class="navi">
			<ul>
				<li id="nav_home"> <a href="?home.html">Home</a> </li>
				<li id="nav_blog"> <a href="?blog.html">Blog</a> </li>
				<li id="nav_about"> <a href="?about.html">About</a> </li>
				<li id="nav_hilfe"> <a href="?hilfe.html">Hilfe</a> </li>
			</ul>
		</div>

Und deine CSS ca. so:

Code:

.navi ul li {
	list-style-type: none;
	background-repeat: no-repeat;
}

.navi ul li a {
  	width: 100%;
  	height: 100%;
	display: block;
}

.navi #nav_home {
	background-image: url(test.png);
	width: 60px;
	height: 60px;
}

.navi #nav_home a:hover {
	background-image: url(test_hover.png);
	width: 60px;
	height: 60px;
}

Solltest du selbst verstehen können und auf die anderen Menüpunkte anwenden.