[Solved] Menu Suggestions

[Stuart]

Hi there
I have a product suggestion that might help lots of web developers
Even though the websites our company develop is completely ajax browsable we do sill ocnsider the non javascript enabled user (mostly crawlers and search engines) but we also consider the user who for security puposes had javascript disabled.

Now recently i stumbled on a menu called quickmenu's from open cube when a user disables his javascript whe sub menu still rolls down and the user can navigate the menu even though javascript has been turned off, their panelmenu's react in more or less the same way , well instead of dropping down the 2nd lev nav appears as a normal menuwould when u move over the item,

I was wondering is it mabe possible to create a pure CSS menu system like they open cube did, for prometius menus and still provide databinding this will make life a whole lit simpler for us

thanx a million

[Atanas Korchev]

Hello Stuart,

It is indeed possible to implement a "pure" CSS menu. However it relies on having the :hover pseudo class applied on all html elements which unfortunately does not work in Internet Explorer 6 which is the most popular browser nowadays. Some of the features of the menu will be disabled as well - scrolling, animations, expand direction and offsetting the groups. Anyway here is the required CSS (for RadMenu Prometheus)

<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>

It is tested in 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 with 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>

Regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center