New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Fixed-position Menu

  • Products
    • UI for ASP.NET AJAX
    • UI for WinForms
    • UI for WPF
    • UI for Silverlight
    • Reporting
    • Data Access
    • Sitefinity ASP.NET CMS
    • Test Studio
  • Consulting
    • On-site Training
    • Consulting Express
    • Open Classes Training
    • Online Training
    • Project Consulting
    • Telerik Webinars
  • Purchase
    • Buy Now
    • Renewals & Upgrades
    • License Agreement
    • FAQ
    • Purchase Orders
    • Contact Sales
  • Support
    • Support by Product
    • Documentation
    • Demos
    • Knowledge Base
    • Telerik Trainer
    • Videos
    • Skins
  • Community
    • Forums
    • Blogs
    • Events
    • Code Library
    • Learning Resources
    • Announcements
    • Free Products
  • Company
    • About Telerik
    • Press Center
    • Careers
    • Contact Us
Scroll the page to test menu fixed position

Sroll page to test menu fixed position

RadMenu can work in a static mode. To make RadMenu static you should apply the following CSS style to the menu object:

<style type="text/css" >
.RadMenu_Fixed
{
	position:fixed !important;
}

* html .RadMenu_Fixed  /*required for IE6*/
{
	position:relative !important;
	top:expression(eval(document.documentElement.scrollTop? document.documentElement.scrollTop : document.body.scrollTop) + "px");
	left:expression(eval(document.documentElement.scrollLeft? document.documentElement.scrollLeft : document.body.scrollLeft ) + "px");
}	
</style>
<telerik:RadMenu runat="server" ID="RadMenu1" CssClass="RadMenu_Fixed />
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container size-wide">

        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" Flow="vertical" CssClass="RadMenu_Fixed"
            DataSourceID="SiteMapDataSource1" EnableTextHTMLEncoding="true" />

        <div class="qsf-ex-hint-container">
            <img src="hint.png" alt="Scroll the page to test menu fixed position" class="qsf-ex-hint" />
            <p>Sroll page to test menu fixed position</p>
        </div>

    </div>

    <asp:SiteMapDataSource runat="server" ID="SiteMapDataSource1" ShowStartingNode="false" />

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance