Menu with CSS style : Menu « Asp Control « ASP.Net






  1. ASP.Net
  2. Asp Control
  3. Menu

Menu with CSS style


<%@ Page Language="C#"%>

<!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" xml:lang="en">
<head id="Head1" runat="server">
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Styling a Menu</title>
    <style type="text/css" rel="stylesheet">
#logo { 
   float: left; 
   width: 10.5em; 
   background: #CCCCCC; 
   padding: 0.5em 0.5em 0.5em 1em;
   margin: 0;        
}
.primaryStaticMenu
{
   background-color: transparent;
   float: right;
}
.primaryStaticMenuItem
{
   width: 10em;
   background-color: #f7f2ea; 
   border-width: 1px;
   border-color: #efefef #aaab9c #ccc #efefef; 
   border-style: solid;
   color: #777777;
   padding: 0.5em 0 0.5em 1em;
}
.primaryStaticHover
{
   color: #800000;
   background: #f0e7d7;
}

.primaryDynamicMenu
{   
   background-color: #f7f2ea;               
   border-bottom: solid 1px #ccc;    
}  
.primaryDynamicMenuItem
{
   width: 10em;
   background-color: #f7f2ea; 
   color: #777;
   padding: 0.5em 0 0.5em 1em;
   border-width: 1px;
   border-color: #f7f2ea #aaab9c #f7f2ea #efefef;  
   border-style: solid;         
}    
.primaryDynamicHover
{
   color: #800000;
   background: #f0e7d7;
}            

.secondaryLevelOne
{
   background-color: transparent;
   background-repeat: repeat-x;
   margin: 1.5em 0 0 0;
   padding: 5px 0 0 5px;
   width: 12em; 
   height: 35px;
}
.secondaryLevelTwo
{
   background: #FAFBFB;
   padding: 5px 0 5px 5px;         
}
.secondaryStaticHover
{
   color: #800000;
}
  
    </style>
</head>
<body>
   <form id="form1" runat="server">
   <div id="container">
      <asp:Menu id="menuPrimary" 
                runat="server" 
                DataSourceID="siteSource1" 
                Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="false"
                StaticDisplayLevels="1"  
                MaximumDynamicDisplayLevels="1">
        <StaticMenuStyle CssClass="primaryStaticMenu"/>
        <StaticMenuItemStyle CssClass="primaryStaticMenuItem"/>
        <StaticHoverStyle CssClass="primaryStaticHover"/>   
        <DynamicMenuStyle CssClass="primaryDynamicMenu" />     
        <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem"/>
        <DynamicHoverStyle CssClass="primaryDynamicHover"/>
      </asp:Menu>


      <asp:SiteMapDataSource ID="siteSource1" runat="server" 
         ShowStartingNode="false"  />
         

   </div>
   </form>
</body>
</html>


File: Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
    
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
   
   <siteMapNode title="Home" description="Home Page" url="Default.aspx">
      <siteMapNode title="News" description="The Latest News" url="News.aspx">
         <siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
         <siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
         <siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
         <siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
      </siteMapNode>
      <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
   </siteMapNode>
</siteMap>








Related examples in the same category

1.Using the MenuItemClick event (C#)
2.Using the MenuItemClick event (VB)
3.Using custom images
4.Applying divider images to dynamic items
5.A simple use of the Menu control
6.Style menu
7.Adding a hover style to static items in the menu control
8.Adding a hover style to dynamic items in the menu control
9.Forcing the menu items to use a horizontal orientation
10.Menu control
11.Menu style: Orientation, StaticSubMenuIndent
12.Data Binding with Menu Control
13.Menu style