Navigationsleiste mit Mouse-Over-Effekt unter CSS

[Rambo]

Hallo!

Ich hab mal ne kleine Frage an die HTML-Profis hier. Ich hab auf meiner Seite eine Navigationsleiste folgendermaßen realisiert:

[URL='https://finale.freesoft-board.to/index1.htm']Homepage[/URL] | [URL='https://finale.freesoft-board.to/index2.htm']Link2[/URL] | [URL='https://finale.freesoft-board.to/index3.htm']Downloads[/URL] | [URL='https://finale.freesoft-board.to/index4.htm']Gästebuch[/URL]

Der dazugehörige CSS-Code:

#menu {
color:#FFFFFF;
background-color:#EAEBED;
text-align:center;
padding:10px 0px;
background-image: url(../pictures/bg_nav.jpg);
background-attachment: fixed;
}

#menu a:link {
color: #333333;
font-weight: bold;
}

#menu a:visited {
color: #333333;
font-weight: bold;
}

#menu a:hover {
color: #999999;
}

#menu a:active {
color: #000000;
font-weight: bold;
}

Jetzt sieht das ganz nett aus - wie ein ganz normales Text-Navigationsmenü. Ich will aber, dass sobald ich mit der Maus darüber fahre sich der komplette Hintergrund verändert - wie bei Buttons oder so ähnlich. Das soll dann so "eingedrückt" aussehen. Nachdem der Besucher dann auf den Link gedrückt hat, soll er dauerhaft in einem bestimmten Zustand bleiben, also z. B. eine neue Text-Farbe erhalten. Nachdem der Besucher auf eine neue Seite wechselt, soll der Link wieder in den Ausgangszustand gehen.

Am liebsten würde ich das sauber mit XHTML 1.0 Strict und CSS realisieren. Kann mir da jemand von euch helfen? Bis jetzt hab ich das mit Dreamweaver noch nicht hinbekommen, wie ich möchte... Ich wäre echt dankbar wenn da jemand helfen kann!!

 

[flitzi05]

Hallo Rambo,
ich kann dir dieses CSS Menü anbieten.
Benutze es selber und es hat einen Effekt mit Farben.

Natürlich kannst Du das Menü zu 100 % an das Design Deiner Seite anpassen.

/* CSS h_emf_pixel_001*/ 
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100.01%;
text-align: center;
margin-right: 0px;
margin-left: 0px;
background-color: #999999;
}
#headermenue {
font-size: 80%;
background-color: #00c;
width: 758px;
padding: 5px 0;
border: 1px solid #fff;
margin: 0 auto;

}
#headermenue ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#headermenue li {
display: inline;
margin: 0px;
padding: 0px;
}

#headermenue li a, #headermenue li a:link {
text-decoration: none;
padding: 0 5px;
color: #fff;
}
#headermenue li a:visited {
color: #0c0;
}
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
color: #ff3;

}

[LIST]

[*]href="#">Hyperlink 1
[*]href="#">Hyperlink 2
[*]href="#">Hyperlink 3
[*]href="#">Hyperlink 4
[*]href="#">Hyperlink 5
[*]href="#">Hyperlink 6
[*]href="#">Hyperlink 7
[*]href="#">Hyperlink 8

[/LIST]

 

[Rambo]

Danke erstmal für deine Hilfe!!!

Das geht schon ziemlich nah an das ran, was ich wollte . Wie kriege ich es jetzt noch hin, dass sich der Background unter dem jeweiligen Feld in eine andere Farbe ändert, sobald die Maus drüber fährt?

Mit:

#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
color: #ff3;
background-color: #00CCCC;
}

Hab ich es bereits probiert, jedoch ist der Hintergrund dann nicht oben und unten bis zum Rand.

Wäre echt klasse, wenn du auf diese Frage auch eine Antwort parat hast! Thx

 

[flitzi05]

Habe mal ein wenig am CSS gebastelt.
Versuche mal diesen CSS Text.

/* CSS h_emf_pixel_001*/
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100.01%;
text-align: center;
margin-right: 0px;
margin-left: 0px;
background-color: #FFFFFF;
}
#headermenue {
font-size: 100%;
background-color: #C0C0C0;
width: 658px;
padding: 1px 0;
border: 1px solid #fff;
margin: 0 auto;

}
#headermenue ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#headermenue li {
display: inline;
margin: 0px;
padding: 0px;
}

#headermenue li a, #headermenue li a:link {
text-decoration: none;
padding: 0 5px;
color: #fff;
}
#headermenue li a:visited {
color: #FF0033;
}
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
color: #ffcc00;
background-color: #818181;

}

 

[Rambo]

Ok Danke!

Das geht schon in die Richtung wie ich mir das vorgestellt hab. Wenn ich jetzt jedoch über und unter der Schrift etwas mehr Platz lassen will, wird wieder nur die Schrift mit einer anderen Farbe hinterlegt. Vielleicht müsste man jeden Link in ein div-Tag packen?

 

[MeX]

timeout ... keiner mehr was zu sagen!?

~ C L O S E D ~

ceeyaa.mex