tutorials
  Checked-Menu
 
"

Checked Menu  - Aktive Seite in der Navigation anzeigen

Pseudoklassen Nutzerinterface 

:checked Zustand, in dem Element ausgewählt ist. CSS 3

Die Checked-Eigenschaft kann zusammen mit anderen Menüelementen in einem Menü verwenden, um den Zustand für eine Anwendung bereitzustellen. Wir  können z. B. ein Häkchen in ein Menüelement in einer Gruppe von Elementen setzen, um die Größe der Schriftart für die Anzeige von Text in einer Anwendung zu bezeichnen. Mithilfe der Checked-Eigenschaft können Wir auch das ausgewählte Menüelement in einer Gruppe von sich gegenseitig ausschließenden Menüelementen kennzeichnen. Hier nützen wir die Checked-Eigenschaft um immer die Aktive Seite durch einen anderen Button anzeigen zu lassen ebenfalls mit Hover  - siehe hier: LINK

Navigation:

td.nav{text-decoration: none;color: #000000;width: 185px;height: 40px;background-image:url(http://BILD-LINK.jpg);}

Navigation Hover:

td.nav:hover{text-decoration: none;color: #000000;width: 185px;height: 40px;background-image:url(http://BILD-LINK.jpg);}

Aktive Seite: 

tr.checked_menu td{background-image:url(http://BILD-LINK.jpg);}

Aktive Seite Hover

tr.checked_menu td:hover{background-image:url(http://BILD-LINK.jpg);}


zusammen: 

<style type="text/css">

<!--

td.nav{text-decoration: none;color: #000000;width: 185px;height: 40px;background-image:url(http://BILD-LINK.jpg);}

td.nav:hover{text-decoration: none;color: #000000;width: 185px;height: 40px;background-image:url(http://BILD-LINK.jpg);}

tr.checked_menu td{background-image:url(http://BILD-LINK.jpg);}

tr.checked_menu td:hover{background-image:url(http://BILD-LINK.jpg);}

-->

</style>

 

In dem Fall benötigen wir zwei weitere  Buttons, wie in unserer Navigation.

Navigation: Button schwarz - Hover blau - dann leuchtet der Button blau

Checked:    Button rot - Hover helleres rot - der Button, der gerade geöffneten Seite ist dann rot und wenn wir mit der Maus darüber fahren, leuchtet er hellrot auf.

 

 

 

 
 
Aktualisieren # Diese Seite Drucken ein Bild Zurück Vor ein Bild ein Bild ein Bild nur IE

Impressum | Rechtliche Hinweise | News

© success4you , Tutorials-Area 2007

 
 
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=
http://www.bambusratte.com/taf.php?%20bgcolor=c5c5c5&txtcolor=000000&anrede=s&site=http:tutorials-%20area.de.tl&bgpic=http:img.webme.com/pic/t/tutorials-area/tutback2.gif&nametaf=Tell-A-Friend