Asp.net Menu controls RSS

• • Reply
  

  shabbir_215

  Member

  427 Points

  420 Posts

  Asp.net Menu controls

  Jan 27, 2011 12:56 PM|LINK

  Hi All,

  I have CMS Application  and have used Asp.NET Menu Controls for the Horizontal menu bar my issue is when i click on any of the menu item i wanted that selected menu item should be in highlighted in different color. Below is my code

  
  

  Master ASPX file 

  <div class="clear hideSkiplink">
                  <asp:Menu ID="NavigationMenu"  runat="server" CssClass="menu"   IncludeStyleBlock="false"  Orientation="Horizontal">
                           <Items>
                          <asp:MenuItem   NavigateUrl="~/Home/Default.aspx" Text="Home" Value="Home"/>
                          <asp:MenuItem NavigateUrl="~/News/Default.aspx" Text="News" Value="News"/>
                          <asp:MenuItem NavigateUrl="~/Calendar/Default.aspx" Text="Calendar" Value="Calendar"/>
                          <asp:MenuItem NavigateUrl="~/Admin/Default.aspx" Text="Admin Forms" Value="Forms"/>
                      </Items>
                  </asp:Menu>
                 
  
                 
  
              </div>

  
  

  CSS File

  div.hideSkiplink
  
  {
  
      background-color:#3a4f63;
  
      width:100%;
  
  }
  
  
  
  div.menu
  
  {
  
      padding: 4px 0px 4px 8px;
  
  }
  
  
  
  div.menu ul
  
  {
  
      list-style: none;
  
      margin: 0px;
  
      padding: 0px;
  
      width: auto;
  
  }
  
  
  
  div.menu ul li a, div.menu ul li a:visited
  
  {
  
      background-color: #465c71;
  
      border: 1px #4e667d solid;
  
      color: #dde4ec;
  
      display: block;
  
      line-height: 1.35em;
  
      padding: 4px 20px;
  
      text-decoration: none;
  
      white-space: nowrap;
  
  }
  
  
  
  div.menu ul li a:hover
  
  {
  
      background-color: #bfcbd6;
  
      color: #465c71;
  
      text-decoration: none;
  
  }
  
  
  
  div.menu ul li a:active
  
  {
  
      background-color: #465c71;   
  
      color: #cfdbe6;
  
      text-decoration: none;
  
  }
  
  

  
  Thanks in Advance

  
  

  
  

  menu control menuitem web.sitemap "Asp.net 2.0" <asp:menu> asp.net menu control Menu Control StaticSelectedStyle not working menu controll menu control selected master pages

• • Reply
  

  grundebar

  Contributor

  4515 Points

  726 Posts

  Re: Asp.net Menu controls

  Jan 27, 2011 01:04 PM|LINK

  You can do this with the following attributes

  <DynamicSelectedStyle CssClass="" />
                  <StaticSelectedStyle CssClass"" />

  
  Point them to whatever css class you have defined for highlighting the text and you should be good to go. 

  "What I hear, I forget; What I see, I remember; What I do, I understand." --Confucius
  
  Remeber to Mark as Answer if this post helped you.
• • Reply
  

  shabbir_215

  Member

  427 Points

  420 Posts

  Re: Asp.net Menu controls

  Jan 27, 2011 01:33 PM|LINK

  Hi

  I tried below as you said still unable to highlight the selected Item, But Didn't work could please brief it in more.

  
  

  CSS

  .current
  {
  	background-color:#bfcbd6;
  	color: #465c71;
      text-decoration: none;
  }

  ASPX

   <asp:Menu ID="NavigationMenu"  runat="server" CssClass="menu"   IncludeStyleBlock="false"  Orientation="Horizontal">
                  <DynamicSelectedStyle CssClass="current" />
                  <StaticSelectedStyle CssClass="current" />
                           <Items>                                    
                          <asp:MenuItem   NavigateUrl="~/Home/Default.aspx" Text="Home" Value="Home"/>
                          <asp:MenuItem NavigateUrl="~/News/Default.aspx" Text="News" Value="News"/>
                          <asp:MenuItem NavigateUrl="~/Calendar/Default.aspx" Text="Calendar" Value="Calendar"/>
                          <asp:MenuItem NavigateUrl="~/Admin/Default.aspx" Text="Admin Forms" Value="Forms"/>
                      </Items>
                  </asp:Menu>

  
  
  

• • Reply
  

  grundebar

  Contributor

  4515 Points

  726 Posts

  Re: Asp.net Menu controls

  Jan 27, 2011 02:29 PM|LINK

  I have replicated the problem. I believe it is because your menu items are hard coded and not connected dynamically. If I connect the menu to a sitemap, the selected cssclass is applied correctly. This sounds like an MS bug per this post.

  "What I hear, I forget; What I see, I remember; What I do, I understand." --Confucius
  
  Remeber to Mark as Answer if this post helped you.
• • Reply
  

  shabbir_215

  Member

  427 Points

  420 Posts

  Re: Asp.net Menu controls

  Jan 27, 2011 04:25 PM|LINK

  If Possible could you send the complete source code which works using SiteMap.

  
  

  Thanks

  Shabbir

• • Reply
  

  grundebar

  Contributor

  4515 Points

  726 Posts

  Re: Asp.net Menu controls

  Jan 27, 2011 06:34 PM|LINK

  There are three things you will need to get this to work. First the sitemap: 

  <?xml version="1.0" encoding="utf-8" ?>
  <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
      <siteMapNode url="" title=""  description="">
          <siteMapNode url="~/Home/Default.aspx" title="Home"  description="Home" />
          <siteMapNode url="~/News/Default.aspx" title="News"  description="News" />
  		<siteMapNode url="~/Calendar/Default.aspx" title="Calendar"  description="Calendar" />
  		<siteMapNode url="~/Admin/Default.aspx" title="Admin"  description="Admin" />
      </siteMapNode>
  </siteMap>

  Next you will need to register your sitemap in your web.config so that you can correctly reference it in your asp:menu control. You only need to do this if you plan on using multiple sitemaps throughout your app or if you put the sitemap outside of your root:

  <siteMap defaultProvider="MyXMLSiteProvider">
      <providers>
          <add name="MyXMLSiteProvider" type="System.Web.XmlSiteMapProvider, System.Web, 
                 Version=2.0.0.0, Culture=neutral, 
                 PublicKeyToken=b03f5f7f11d50a3a" siteMapFile="~/web.sitemap" />
      </providers>
  </siteMap>

  Finally the asp:menu control with sitemap datasource:

  <asp:SiteMapDataSource ID="smDS" runat="server" ShowStartingNode="false" SiteMapProvider="MasterPagesXMLSiteProvider" />
  <asp:Menu ID="NavigationMenu" runat="server" DataSourceID="smDS" Orientation="horizontal"
      CssClass="menu">
      <StaticSelectedStyle CssClass="current" />
  </asp:Menu>

  
  That should get you going.
  
  

  "What I hear, I forget; What I see, I remember; What I do, I understand." --Confucius
  
  Remeber to Mark as Answer if this post helped you.
• • Reply
  

  shabbir_215

  Member

  427 Points

  420 Posts

  Re: Asp.net Menu controls

  Jan 28, 2011 12:13 PM|LINK

  Hi

  
  

  Thanks for the detail source, I Tried but didn't work :(

  
  

  Cheers,

  Shabbir

• • Reply
  

  grundebar

  Contributor

  4515 Points

  726 Posts

  Re: Asp.net Menu controls

  Jan 28, 2011 12:24 PM|LINK

  What part didn't work? Is your menu on a master page? 

  "What I hear, I forget; What I see, I remember; What I do, I understand." --Confucius
  
  Remeber to Mark as Answer if this post helped you.
• • Reply
  

  shabbir_215

  Member

  427 Points

  420 Posts

  Re: Asp.net Menu controls

  Jan 28, 2011 12:30 PM|LINK

  Yes mine menu is on the Master Page, Basically there is still a problem when you select any menu it doesn't 

  change  the backcolor as mention in css

  
  

  
  

• • Reply
  

  Zizhuoye Che...

  All-Star

  21915 Points

  1915 Posts

  Re: Asp.net Menu controls

  Feb 01, 2011 05:03 AM|LINK

  Hi,

  I think if you use a master page, and you want to change the back color of menu item. You can write some code to implement it.

  Check this link:

  http://forums.asp.net/p/1342987/2723029.aspx

  If your menu item has only 1 static level. Create a xml site map as it mentioned. I think it can meet your requirment.

  Check this link:

  http://www.codeproject.com/KB/webforms/MenuControlSelectedItem1.aspx

  http://forums.asp.net/p/1373509/2879824.aspx

  Altenative way, you can consider to use CSS Adapter for menu control:

  http://www.asp.net/cssadapters/menu.aspx

  http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx#SimpleMenu

  Hope this can help you.

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com
  Microsoft One Code Framework
  • Edited by Zizhuoye Chen - MSFT on Feb 01, 2011 05:04 AM
  • Marked as answer by Hua-Jun Li - MSFT on Feb 02, 2011 01:42 PM