This is a migrated thread and some comments may be shown as answers.

RadMenu fixed position on top full width

0 Answers 177 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Vladyslav
Top achievements
Rank 1
Vladyslav asked on 28 Mar 2018, 07:55 PM

     Hello all.

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

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

Now if I have 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 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%;
}

 

 

No answers yet. Maybe you can help?

Tags
Menu
Asked by
Vladyslav
Top achievements
Rank 1
Share this question
or