Home


Zurück zur Startseite

Beispielfunktionen

Bitte beachten Sie, dass die folgenden Elemente zum Teil auf neue Technologien setzen, die in älteren Browsern zum Teil nicht unterstützt werden. Der Internet Explorer wird erst ab Version 9 unterstützt.

jQuery UI Radialmenu Widget

Dieses Widget für jQuery UI, einem Framework zum Erstellen von Benutzeroberflächen, begann lediglich als Experiment und wurde von mir seitdem immer weiter entwickelt.
Das Radialmenü kann dabei auf zwei Arten mit Menüpunkten gefüllt werden kann, die sich gegenseitig nicht ausschließen. Jede HTML-Liste (ul,ol) innerhalb des ausgewählten Elements wird ausgelesen und ihr Inhalt als Menü verwendent. Zusätzlich kann ein JavaScript-Array per Option übergeben werden. Beide Varianten werden verschmolzen und bilden die letztendlichen Menüpunkte. Alle anderen Elemente innerhalb des Eltern-Elements bleiben dabei unverändert.

Radialmenü


Testen Sie mich!

Im Beispiel wurden jQuery UI CSS-Klassen zur Darstellung der Menüpunkte verwendet. Es können aber natürlich auch eigene Klassen und Bilder dafür verwendet werden.

Für Interessierte gibt es hier den Quelltext und ein Beispiel zum Download.

Persistentes CSS-Menü

Heutzutage werden viele Menüs mit reinem CSS umgesetzt. Zumeist, indem eine innere Box standardmäßig ausgeblendet wird und nur angezeigt wird, wenn der Cursor über der äußeren Box positioniert wird. Dies wird über die CSS-Pseudoklasse "hover" gelößt, die heutzutage in jedem Browser für so ziemlich jeden HTML-Tag akzeptiert wird.
Ein Nachteil an dieser Vorgehensweise ist, dass das Untermenü geschlossen wird, sobald man die Grenzen der äußeren Box verläßt. Manchmal ist es jedoch gewünscht, dass ein Untermenü weiterhin (persistent) geöffnet bleibt. Auch dies ist bereits möglich, jedoch zumeist nur mit zusätzlicher Hilfe durch JavaScript.

Die neuen CSS-Selectoren, die mit CSS3 eingeführt werden und von den meißten aktuellen Browsern unterstützt werden ermöglichen es jedoch, ein solches Menü in reinem CSS umzusetzen.

Dieses Menü macht sich zwei neue CSS3-Selektoren zu Nutze. Den "~"-Selektor und die ":checked"-Pseudoklasse. Die allgemeine Vorgehensweise ist dabei ähnlich dem Hover-Modell: Es gibt auch hier eine äußere und eine innere Liste, die entsprechend gestyled wurden. Zusätzlich wurde in jedes Listenelement der äußeren Liste ein <input> vom Typ "radio" eingefügt und mit einem <label> verknüpft. Das "radio"-Feld wurde anschließend ausgeblendet, da auch ein Klick auf das <label> den Wert ändern kann. Dieses wurde wiederrum zum Tab des äußeren Menüs.
Durch die beiden CSS3-Selektoren ist es nun möglich die innere Liste des ausgewählten äußeren Listenelements einzublenden.
Schließlich wurde noch eine Backdrop-Funktion in jQuery erstellt, sodass die Benutzung auch Browsern möglich ist, die diese Selektoren nicht unterstützen.