|
Article relates to
|
RadMenu Prometheus
|
|
Created by
|
Nick
|
|
Last modified
|
January 31, 2008
|
|
Last modified by
|
Nick
|
HOW TO implement a pure CSS RadMenu
Such a menu might be needed for users, who for security puposes had javascript disabled.
It is indeed possible to implement a "pure" CSS RadMenu. It will, however, rely on having the
:hover pseudo class applied to all html elements, which unfortunately does not work in Internet Explorer 6 (which is the most popular browser today). Some of the features of the menu will be disabled as well -
scrolling,
animations,
expand direction and
offsetting the groups.
The required CSS for RadMenu Prometheus is shown below:
| <style type="text/css"> |
| |
| .RadMenu .rmItem:hover > .rmSlide, |
| .RadMenu .rmItem:hover > .rmSlide .rmGroup |
| { |
| display: block; |
| overflow: visible; |
| } |
| |
| .RadMenu .rmItem:hover .rmSlide |
| { |
| top: 100%; |
| left: 0; |
| } |
| |
| .RadMenu .rmItem .rmItem:hover .rmSlide |
| { |
| top:0; |
| left: 100%; |
| } |
| |
| .RadMenu .rmVertical .rmItem |
| { |
| float:none; |
| } |
| |
| </style> |
| |
| |
The above CSS should work under FireFox and Internet Explorer 7. This CSS will affect the menu behavior when JavaScript is enabled so it must not be included in that case. You can achieve that by removing the <style> tag from the DOM via JavaScript:
| <script type="text/javascript"> |
| //replace the zero with the index of the style-tag (if more than one) |
| var styleTag = document.getElementsByTagName("style")[0]; |
| styleTag.parentNode.removeChild(styleTag); |
| </script> |
| |
Please
Sign In
to rate this article.