I have a menu with a submenu.
The following is the code for the menu on the site master
<div id="menu">
<h2>
Dashboard</h2>
<asp:Menu ID="NavigationMenu" dir="rtl" runat="server" CssClass="menu" EnableViewState="false"
Orientation="Vertical">
<Items>
<asp:MenuItem NavigateUrl="~/Vi.aspx" Text="View "/>
<asp:MenuItem NavigateUrl="~/I.aspx" Text="Import"/>
<asp:MenuItem NavigateUrl="~/S.aspx" Text="Insert "/>
<asp:MenuItem NavigateUrl="~/R.aspx" Text="Reports"/>
<asp:MenuItem NavigateUrl="~/Re.aspx" Text="Re" />
<asp:MenuItem Text="Maintenance">
<asp:MenuItem NavigateUrl="~/F.aspx" Text="For" />
<asp:MenuItem NavigateUrl="~/P.aspx" Text="Prod" />
<asp:MenuItem NavigateUrl="~/T.aspx" Text="T" />
<asp:MenuItem NavigateUrl="~/U.aspx" Text="U" />
<asp:MenuItem NavigateUrl="~/C.aspx" Text="C" />
</asp:MenuItem> </Items>
</asp:Menu>
</div>
The problem is that when i open the submenu it is overlapping the gridview on the page and it not a matter of z-index the background seems to be transparent but i dont want it transparent
There are some issues with Z Index not being handled as planned always when working with master pages.. Where messing around with a similar problem a while back and this forum post helped me: http://forums.asp.net/t/1038006.aspx
Related
I tried to set set the "User" menu item to left align, but could not find the correct method. Below is my code snippet
<asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false"
<asp:MenuItem Text="User" ToolTip="User">
<asp:MenuItem Text="Profile" ToolTip="Profile" />
<asp:MenuItem Text="Settings" ToolTip="Settings" />
<asp:MenuItem Text="Sign Out" ToolTip="Sign Out" />
</asp:MenuItem>
</Items>`
</asp:Menu>
I'm trying to add a menu bar with border and separator between each menu name, and the menu bar should be in middle like a banner but i'm finding difficulty in doing it please help me out.
This is my code and i'm trying to achieve it without CSS.
thanks
<div id="header">
<asp:Menu ID="Menu1" runat="server" Height="25px" Orientation="Horizontal"
style="margin-top: 21px" Width="833px" BorderStyle="Double" BorderWidth="5px" BorderColor="Black">
<Items>
<asp:MenuItem Text="HOME" Value="HOME"></asp:MenuItem>
<asp:MenuItem Text="SERVICES" Value="SERVICES">
<asp:MenuItem Text="SERVICES1" Value="SERVICES1"></asp:MenuItem>
<asp:MenuItem Text="SERVICES2" Value="SERVICES2"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="CONTACT US" Value="CONTACT US"></asp:MenuItem>
<asp:MenuItem Text="ABOUT US" Value="ABOUT US"></asp:MenuItem>
<asp:MenuItem Text="LOGOUT" Value="LOGOUT" NavigateUrl="~/login.aspx"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
this is my output screen
https://onedrive.live.com/redir?resid=8968FBBEC294BC6F!128&authkey=!AOraVApo5DcsFtY&v=3&ithint=photo%2cpng
I used css3 menu software. it works great and free! we can add menu icons too.
Just copy paste the generated code + css file to the root folder and you're done.
here is the link
I am trying to set the backcolor on the asp.net menu's selected item but it has no effect.
<div id="navepanel" style="float:left;">
<asp:Menu ID="Menu1" runat="server">
<StaticSelectedStyle BackColor="#D5D9F7" />
<DynamicSelectedStyle BackColor="#D5D9F7" />
<Items>
<asp:MenuItem Text="New Chapter" Value="New Chapter" NavigateUrl="~/ChapterManagement/CreateNewChapter.aspx"></asp:MenuItem>
<asp:MenuItem Text="Edit Chapter" Value="Edit Chapter" NavigateUrl ="~/ChapterManagement/EditChapter.aspx"></asp:MenuItem>
<asp:MenuItem Text="Select Chapter" Value="Select Chapter" NavigateUrl ="~/ChapterManagement/SelectChapter.aspx"></asp:MenuItem>
<asp:MenuItem Text="Add Topics" Value="Add Topics" NavigateUrl ="~/ChapterManagement/AddTopics.aspx"></asp:MenuItem>
</Items>
</asp:Menu>
I am using Chrome currently for the testing purpose. This menu control is on the master page.
Try this:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" StaticDisplayLevels="1"
Orientation="Horizontal" DataSourceID="SiteMapDataSource1" >
<staticselectedstyle backcolor="LightBlue" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
using the asp:MenuItem control how does one style the submenuitem text?
Here is my markup;
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" ToolTip="Home" Text="Home"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Products.aspx" Value="Products" Text="Products">
<asp:MenuItem Text="EnerBurn" Value="EnerBurn"></asp:MenuItem>
<asp:MenuItem Text="EnerKool" Value="EnerKool"></asp:MenuItem>
<asp:MenuItem Text="PEx(Particulate Extraction)" Value="PEx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Investor Info" >
<asp:MenuItem Text="Press Releases" Value="Contact Support"></asp:MenuItem>
<asp:MenuItem Text="Quarterly Filings" Value="Send E-mail"></asp:MenuItem>
<asp:MenuItem Text="Annual Reports" Value="Contact By Phone"></asp:MenuItem>
<asp:MenuItem Text="Corporate Information" Value="Send E-mail"></asp:MenuItem>
<asp:MenuItem Text="Update Letters from Management" Value="Contact By Phone"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Contact" Value="Contact" NavigateUrl="~/Contact.aspx">
<asp:MenuItem Text="Contact us" Value="Contact Support"></asp:MenuItem>
<asp:MenuItem Text="Login Request" Value="Send E-mail"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
I want the submenuitems box to have rounded corners, I tried applying a .submenu class with the appropriate css which had zero effect.
Here is my ASP.NET Master Page:
The problem is, that when I set the margin to zero, my page overflows and I get a scrollbar at the bottom of the page. Any ideas?
The reason I am setting the margin to zero is because I want the content to fill the page completely, so that my ASP:Menu spans the whole page.
<body style="padding:0; margin:0;">
<div>
<form id="frmMaster" runat="server">
<asp:ScriptManager runat="server" ID="scriptManagerID" EnablePageMethods="true" ScriptMode="Release"></asp:ScriptManager>
<div id="header">
<div id="headerTop">
<div id="headerLeft">
<asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/Company_Logo.jpg" Height="80px" AlternateText="Logo" />
</div>
<div id="headerRight">
<asp:Menu ID="mnuMain" runat="server" OnMenuItemClick="mnuMain_MenuItemClick" Orientation="Horizontal"
StaticDisplayLevels="1" MaximumDynamicDisplayLevels="3" SkinID="UserBar" >
<Items>
<asp:MenuItem Text="About" Value="About;list"></asp:MenuItem>
<asp:MenuItem Text="Config" Selectable="false">
<asp:MenuItem Text="Change Password" Value="ChangePassword;edit"></asp:MenuItem>
<asp:MenuItem Text="Customer Ranks" Value="ConfigCustomersRank;list"></asp:MenuItem>
<asp:MenuItem Text="Registration" Value="RegistrationInfo;list"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Logout" Value="Logon;logout"></asp:MenuItem>
</Items>
</asp:Menu>
<asp:Label ID="lblMasterError" runat="server" ForeColor="Red" Text="Error" Visible="False"></asp:Label>
<asp:Label ID="lblUser" runat="server" ForeColor="Black" Text="User: " ></asp:Label>
</div>
</div>
</div>
<div id="menu" class="clear hideSkipLink">
<asp:Menu ID="mnuModule" runat="server" OnMenuItemClick="mnuModule_MenuItemClick"
Orientation="Horizontal" SkinID="Navigation" >
<Items>
<asp:MenuItem Text="Home" Value="Home;list"></asp:MenuItem>
<asp:MenuItem Text="Calendar" Value="Calendar;month"></asp:MenuItem>
<asp:MenuItem Text="Customers" Value="Customers;list">
<asp:MenuItem Text="Create Customer" Value="Customers;create;0;;0;"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Communications" Selectable="false">
<asp:MenuItem Text="Activities" Value="Activities;list">
<asp:MenuItem Text="Create Activity" Value="Activities;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Emails" Value="Emails;list">
<asp:MenuItem Text="Create Email" Value="Emails;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Meetings" Value="Meetings;list">
<asp:MenuItem Text="Create Meeting" Value="Meetings;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Phone Communication" Value="PhoneComms;list">
<asp:MenuItem Text="Schedule Phone" Value="PhoneComms;create"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Transactions" Selectable="false">
<asp:MenuItem Text="Invoices" Value="Invoices;list"></asp:MenuItem>
<asp:MenuItem Text="Leads" Value="Leads;list">
<asp:MenuItem Text="Create Lead" Value="Leads;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Opportunities" Value="Opportunities;list">
<asp:MenuItem Text="Create Opportunity" Value="Opportunities;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Quotes" Value="Quotes;list">
<asp:MenuItem Text="Create Quote" Value="Quotes;create"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Reports" Selectable="false">
<asp:MenuItem Text="Contracts For Renewal" Value="CTRTContractsForRenewal;list"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
<asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>
</form>
</div>
The problem was that in the Content page (not master), there was the following code:
<asp:Panel ID="pnlHeader" runat="server" SkinID="None" CssClass="Panel_Page_Header" >
<asp:Label ID="lblHome" runat="server" Text="Home" SkinID="None" CssClass="Label_Page_Header" ></asp:Label>
</asp:Panel>
And the Label_Page_Header class had the following properties
padding: 5px;
width: 100%;
With the padding, the width:100% was stretching the label out over the edge of the page.