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:

<!--

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.