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
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 am styling my horizontal menu in asp.net
<div id="menu" style="margin-left:auto;margin-right:auto" >
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="list">
<Items>
<asp:MenuItem NavigateUrl="" Text="" Value=""></asp:MenuItem>
<asp:MenuItem NavigateUrl="" Text="" Value=""></asp:MenuItem>
<asp:MenuItem Text="" Value="">
<asp:MenuItem NavigateUrl="" Text="" Value="" ></asp:MenuItem>
<asp:MenuItem NavigateUrl="" Text="" Value="" ></asp:MenuItem>
<asp:MenuItem Text="" Value="">
<asp:MenuItem NavigateUrl="" Text="" Value=""></asp:MenuItem>
<asp:MenuItem NavigateUrl="" Text="" Value=""></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="" Value="">
<asp:MenuItem NavigateUrl="" Text="" Value=""></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="" Value="">
<asp:MenuItem NavigateUrl="#" Text="" Value=""></asp:MenuItem>
<asp:MenuItem NavigateUrl="" Text="" Value=""></asp:MenuItem>
<asp:MenuItem NavigateUrl="" Text="" Value="" Target="_blank"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div><!-- #menu-->
My page width is 1200px.
However sometime I have 5 menu lists, sometimes I have 4 menu lists depend on the user.
I need to make a webpage that can always show the menu in the center.
Is anyone know how to set the horizontal menu to be center without setting the specific width with CSS?
#menu {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width. Works on IE8+ and modern browsers.
set the css of the div with id menu
margin:0 auto;
Display: inline-block;
This will place it to center of the browser
set the css of the div with id menu
#menu {
margin:0 auto;
Display: inline-block;
}
This will place it to center of the browser
You could always use the css rule: text-align
Also another option would be use:
display: inline-block;
vertical-align: bottom;
The vertical align is to remove the extra margin at the bottom
It would work fine
I was faced with this same problem, and after trying all the answers I came across I stumbled on the following which worked for me when placed in the style tag/css for the Div:
table-layout:fixed;
Hope that helps.
you can replicate my problem with this small code snippet.
<div ID="topcell" runat="server" align="center" style="text-align:center">
<asp:Menu ID="testmenu" runat="server" Width="300px" Orientation="Horizontal" RenderingMode="List">
<Items>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
Result:
Testing-Testing-Testing-Testing-Testing-Testing
Testing----------------------------------------
Desired results:
Testing-Testing-Testing-Testing-Testing-Testing
------------------Testing----------------------
I have tried all three RenderingModes with no luck! Am I doing something wrong?
Try adding following CSS to your page:
<style type="text/css" >
#testmenu ul li {
display:inline-block;
float:none !important;
}
</style>
It will overwrite inline menu styles and force the unordered list to center.
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.
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