I'm using ASP.Net's Menu control http://msdn.microsoft.com/en-us/library/ecs0x9w5%28v=vs.80%29.aspx, which I'm trying to position.
Markup for the menu is this
<asp:Menu ID="SiteMenu" runat="server" Orientation="Horizontal" BorderColor="Blue" Font-Size="XX-Large" StaticMenuItemStyle-BackColor = "Pink" StaticMenuItemStyle-HorizontalPadding = "11">
<Items>
<asp:MenuItem Text="Articles" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Wiki" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Forums" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem>
</Items>
</asp:Menu>
So I just figured I'd add tags around it,
<div horizontal-align:center>
<asp:Menu ID="SiteMenu" runat="server" Orientation="Horizontal" BorderColor="Blue" Font-Size="XX-Large" StaticMenuItemStyle-BackColor = "Pink" StaticMenuItemStyle-HorizontalPadding = "11">
<Items>
<asp:MenuItem Text="Articles" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Wiki" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Forums" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
but nah that didn't work. So what's my next move?
oops , you should use margins and widths :
<div style="margin:0 auto 0 auto; width:750px;">
<asp:Menu ID="SiteMenu" runat="server" Orientation="Horizontal" BorderColor="Blue" Font-Size="XX-Large" StaticMenuItemStyle-BackColor = "Pink" StaticMenuItemStyle-HorizontalPadding = "11">
<Items>
<asp:MenuItem Text="Articles" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Wiki" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Forums" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
Use margin like:
margin:0 auto;
This help you make it automatically centered to its parent element.
Related
I have tried to show the menu name below of menu icon,. but I don't know how to do that.
My ASPX Code
<asp:menu runat="server" ItemWrap="true" Orientation="Horizontal">
<Items>
<asp:MenuItem ImageUrl="~/Images/Admin.png" Selectable="true" Text="System" />
<asp:MenuItem ImageUrl="~/Images/user.png" Selectable="true" Text="User" />
<asp:MenuItem ImageUrl="~/Images/cut.png" Selectable="true" Text="Cut" />
<asp:MenuItem ImageUrl="~/Images/edit-copy.png" Selectable="true" Text="Copy" />
</Items>
</asp:menu>
Output
Please try putting <br> tag while setting Text to menu Item .
Then the menu will be
<asp:Menu runat="server" ItemWrap="true" Orientation="Horizontal">
<Items>
<asp:MenuItem ImageUrl="~/Images/Admin.png" Selectable="true" Text="<br> System" />
<asp:MenuItem ImageUrl="~/Images/user.png" Selectable="true" Text="<br> User" />
<asp:MenuItem ImageUrl="~/Images/cut.png" Selectable="true" Text="<br> Cut" />
<asp:MenuItem ImageUrl="~/Images/edit-copy.png" Selectable="true" Text="<br> Copy" />
</Items>
</asp:Menu>
I have a ASP Menu in my webpage:
<asp:Menu ID="Menu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="" Value="home" />
....
</Items>
</asp:Menu>
All I want is: The Text tag of MenuItem displays the user name: Session["user"].Tostring()
with code behind:
IDMenuItem.Text= Session["user"].Tostring();
and
<asp:MenuItem Text="//the user name will be displayed here" Value="home" />
But there is no ID tag in MenuItem. Help???
Try:
Menu.Items[0].Text = Session["user"].ToString();
I am using asp:Menu for the first time and running into a problem.
I have a horizontal menu with four options. The third option is "Filter". Hovering over "Filter" produces a vertical drop-down menu with several options, two of which are "Filter Category One" and "Filter Category Two". The dropdown menu with those options looks fine until I hover over one of the options (such as "Filter Category One") that has children.
At that time a blank line appears under "Filter Category One" at the same time that its own menu options (children) appear off to the right. Also a blank line appears at the bottom of the level-3 menu, which is the child menu that appears when I hover over "Filter Category One". In other words, the menu with the options Filter 1.1, Filter 1.2, and Filter 1.3 (see below) has a blank line below Filter 1.3.
I suspect (but am not positive) that the blank line between Filter Category One and Filter Category Two when hovering over Filter Category One has the same cause as the extra blank line that appears after Filter 1.3.
My customer uses only IE 8. I browsed using Firefox and Chrome and did not experience this particular problem. (Many other problems showed up, but not this particular one.)
I've found complaints about asp:Menu and IE8 at stackoverflow and elsewhere, but I have not seen a complaint identical to mine.
I would appreciate any help.
I'll be happy to attach a pic if there is a way to upload one.
FOLLOW-UP: We use IE8 Quirks Mode. The problem disappears in IE 8 Standards or IE 7 Standards mode (though other problems appear).
<asp:Menu
OnMenuItemClick="Menu_ItemSelected"
Orientation="Horizontal"
ID="MainMenu"
runat="server"
StaticDisplayLevels="1"
DynamicHoverStyle-BackColor="LightGray"
DynamicHoverStyle-BorderColor="Black"
DynamicHoverStyle-BorderStyle="Solid"
DynamicHoverStyle-BorderWidth="1"
StaticMenuItemStyle-BorderColor="gray"
StaticMenuItemStyle-BorderWidth="1"
StaticMenuItemStyle-BorderStyle="Solid"
StaticMenuItemStyle-HorizontalPadding="15px"
DynamicMenuStyle-BorderColor="Black"
DynamicMenuStyle-BorderStyle="Solid"
DynamicMenuStyle-BorderWidth="1"
DynamicMenuStyle-BackColor="WhiteSmoke"
DynamicMenuStyle-HorizontalPadding="0"
DynamicMenuItemStyle-HorizontalPadding="5"
DynamicMenuItemStyle-Font-Size="X-Small"
>
<Items>
<asp:MenuItem Text="Home" NavigateUrl="javascript:mainPage_Click()" />
<asp:MenuItem Text="Job Details" NavigateUrl="javascript:jobDetailsPage_Click()" />
<asp:MenuItem Selectable="false" Text="Filter">
<asp:MenuItem Selectable="true" Text="Clear Filter"/>
<asp:MenuItem Selectable="false" Text="Filter Category One">
<asp:MenuItem Selectable="true" Text="Filter 1.1"/>
<asp:MenuItem Selectable="true" Text="Filter 1.2"/>
<asp:MenuItem Selectable="true" Text="Filter 1.3"/>
</asp:MenuItem>
<asp:MenuItem Selectable="false" Text="Filter Category Two">
<asp:MenuItem Selectable="true" Text="Filter 2.1"/>
<asp:MenuItem Selectable="true" Text="Filter 2.2"/>
<asp:MenuItem Selectable="true" Text="Filter 2.3"/>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Help" NavigateUrl="ITOBPSLADB_help.htm" Target="_blank" />
</Items>
</asp:Menu>
Unable to replicate your issue with the following code and IE8 in Compatibility view. Please correct my doctype or whatever is different here from yours so that this code also breaks/shows blank lines in IE8.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu
OnMenuItemClick="Menu_ItemSelected"
Orientation="Horizontal"
ID="MainMenu"
runat="server"
StaticDisplayLevels="1"
DynamicHoverStyle-BackColor="LightGray"
DynamicHoverStyle-BorderColor="Black"
DynamicHoverStyle-BorderStyle="Solid"
DynamicHoverStyle-BorderWidth="1"
StaticMenuItemStyle-BorderColor="gray"
StaticMenuItemStyle-BorderWidth="1"
StaticMenuItemStyle-BorderStyle="Solid"
StaticMenuItemStyle-HorizontalPadding="15px"
DynamicMenuStyle-BorderColor="Black"
DynamicMenuStyle-BorderStyle="Solid"
DynamicMenuStyle-BorderWidth="1"
DynamicMenuStyle-BackColor="WhiteSmoke"
DynamicMenuStyle-HorizontalPadding="0"
DynamicMenuItemStyle-HorizontalPadding="5"
DynamicMenuItemStyle-Font-Size="X-Small"
>
<Items>
<asp:MenuItem Text="Home" NavigateUrl="javascript:mainPage_Click()" />
<asp:MenuItem Text="Job Details" NavigateUrl="javascript:jobDetailsPage_Click()" />
<asp:MenuItem Selectable="false" Text="Filter">
<asp:MenuItem Selectable="true" Text="Clear Filter"/>
<asp:MenuItem Selectable="false" Text="Filter Category One">
<asp:MenuItem Selectable="true" Text="Filter 1.1"/>
<asp:MenuItem Selectable="true" Text="Filter 1.2"/>
<asp:MenuItem Selectable="true" Text="Filter 1.3"/>
</asp:MenuItem>
<asp:MenuItem Selectable="false" Text="Filter Category Two">
<asp:MenuItem Selectable="true" Text="Filter 2.1"/>
<asp:MenuItem Selectable="true" Text="Filter 2.2"/>
<asp:MenuItem Selectable="true" Text="Filter 2.3"/>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Help" NavigateUrl="ITOBPSLADB_help.htm" Target="_blank" />
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
<uc:Tabs runat="server">
<uc:ControlA runat="server" />
<uc:ControlB runat="server" />
<uc:ControlC runat="server" />
</uc:Tabs>
I'm trying to build a "Tabs" user control that will gather all of the controls nested within itself and wrap them in a specific set of html. Each nested user control should display normally. Any pointers to where I might begin?
Edit:
<asp:Menu
id="Menu1"
StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab"
CssClass="tabs"
OnMenuItemClick="Menu1_MenuItemClick"
Runat="server">
<Items>
<asp:MenuItem Text="Tab 1" Value="0" Selected="true" />
<asp:MenuItem Text="Tab 2" Value="1" />
<asp:MenuItem Text="Tab 3" Value="2" />
</Items>
</asp:Menu>
<asp:MultiView ID="MultiView1" ActiveViewIndex="0" runat="server">
<asp:View ID="View1" runat="server">
<hi5:GameInfo runat="server" />
</asp:View>
<asp:View ID="View2" runat="server">
<hi5:GamePlayerInfo runat="server" />
</asp:View>
<asp:View ID="View3" runat="server">
<hi5:GuildInfo runat="server" />
</asp:View>
</asp:MultiView>
I guess I could use asp:Menu and asp:MultiView and wrap each with the appropriate classes.
Wish I could remove the auto generated css that asp:Menu puts into the <head> though. Any idea how to do that?
Here is an MSDN VB solution which could be easily translated to C#.
http://support.microsoft.com/kb/319100
However depending on what you are trying to accomplish, this sounds like it may be an overcomplicated or overkill solution for what you are trying to do.
I'm trying to create an asp menu for a website. The site will have 2 levels of user Master users (which will have more options) and Sub users which will have limited menu options.
I was wonder does anyone knows if a way to hide menu items? I've tried google but I can't really find much.
Here's the Asp code
<asp:Menu id="MainMenu" runat="server" StaticDisplayLevels="1" Orientation="Horizontal" >
<Items>
<asp:MenuItem Text="Setup" Value="">
<asp:MenuItem ID="DepoAccount" Text="Depo Account Details" Value="" NavigateUrl="~/AccountManagment.aspx"></asp:MenuItem>
<asp:MenuItem Text="User Accounts" Value="" NavigateUrl="~/ImplantParameters.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Actions" Value="">
<asp:MenuItem Text="View Consignments" Value="" NavigateUrl="~/Consignements.aspx"></asp:MenuItem>
<asp:MenuItem Text="Add Consignments" Value="" NavigateUrl="~/Consignements.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Utitlies" Value="">
<asp:MenuItem Text="Export" Value="" NavigateUrl="~/ImplantParameters.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Reports" Value="">
<asp:MenuItem Text="Manifest" Value="" NavigateUrl="~/ImplantParameters.aspx"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
I have worked out how to hide the whole menu when the user is not logged in
MainMenu.Visible = false
Any pointers would be greatly appreciated.
You're looking for ASP.NET's Security Trimming feature.
You should move your static menu items into an XML SiteMap file, and set EnableSecurityTrimming on the sitemap to true.