RadMenu fixed position on top full width

1 posts, 0 answers
  1. Vladyslav
    Vladyslav avatar
    4 posts
    Member since:
    Jan 2012

    Posted 28 Mar 2018 Link to this post

         Hello all.

    I'm new to Telerik UI for ASP.NET AJAX. 

    I have menu on Master Page. All other pages are nested.

    Now if I have grid on page scroll down - everything goes down. But I want that at least my main menu from Master page stays fixed always on screen.

    I tried something like this, but it works not so good, my main panel blinking sometime while scrolling.

    Please advise me how I can figure it out. Thanks, I hope that there must be a single property!

    Master Page.

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="VulcanDash.Site1" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title></title>
            <asp:ContentPlaceHolder ID="head" runat="server">
            </asp:ContentPlaceHolder>
            <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
            <link href="CSS/MasterPage.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <form id="form1" runat="server">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                    <Scripts>
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                    </Scripts>
                </telerik:RadScriptManager>
                <div class="container RadMenu_Fixed">
                    <telerik:RadMenu ID="RadMenu1" Runat="server" ClickToOpen="True" Skin="Telerik" EnableRoundedCorners="True">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Dashboard" NavigateUrl="GeneralForm.aspx" Target="_parent"> 
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="TA" NavigateUrl="TransactionApprovalForm.aspx" Target="_parent"> 
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Login" NavigateUrl="LoginForm.aspx" Target="_parent">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenu>
                </div>
                <div class="container MainContent">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            
                    </asp:ContentPlaceHolder>
                </div>
            </form>
        </body>
    </html>

     

    Master Page.css

     

    .RadMenu_Fixed
    {
    position:fixed !important;
    width:100%;
    top:0px;
    }

    * 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");
    }

    .MainContent
    {
        margin-top: 15px;
        width:100%;
    }

     

     

Back to Top