LLeerrooyy
Mitglied
Hallo zusammen,
ich habe mir zu Testzwecken eine CSS Menu Vorlage herunter geladen.
Diese will ich jetzt verändern. Habe im bereich CSS Menus keine großen Erfahrungen.
Ich kann eigentlich nur standard CSS Text Menus erstellen.
Aber diese Vorlage hat jetzt Grafiken, die sich je nach Aktion verändern.
Der hover Effekt klappt wunderbar. Aber wie bekomme ich den "Gedrückt" Effekt hin ?
Sprich, ich klicke auf einen Menupunkt, und aktiviere dann die Klasse "current".
Hier mal der Code:
ich habe mir zu Testzwecken eine CSS Menu Vorlage herunter geladen.
Diese will ich jetzt verändern. Habe im bereich CSS Menus keine großen Erfahrungen.
Ich kann eigentlich nur standard CSS Text Menus erstellen.
Aber diese Vorlage hat jetzt Grafiken, die sich je nach Aktion verändern.
Der hover Effekt klappt wunderbar. Aber wie bekomme ich den "Gedrückt" Effekt hin ?
Sprich, ich klicke auf einen Menupunkt, und aktiviere dann die Klasse "current".
Hier mal der Code:
HTML:
<style type="text/css">
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}
</style>
</head>
<body>
<ul class="menu1">
<li class="current"><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>Test-Button</b></a></li>
<li><a href="#nogo"><b>BlaBlub</b></a></li>
<li><a href="#nogo"><b>Where to find us</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>
</body>
