Twitter Feed Popout byInfofru

Integrating CSS Control Adapter With Menu Control

2. March 2009 AngryCoder asp.net , CSS Comments (0)

This is on the request of some of my readers to show how effective Asp.net menu control is by using CSS Control Adapter. Most of the folks either have no idea of what CSS Adapter is or have some problem in integrating that with their applications.

So, In this post I will brief you guys how can we use CSS Adapter to format the design of Asp.net Menu Control. Before we start, let me dig out why would somebody use CSS Adapter and what does that do ?

Have you ever notice by viewing the source of your page what asp.net runtime engine generate when you use any Data list, or in our case Menu Control.
It generates Table based layout, which is of course really difficult to design and not consider a good practice in the new web standards. To overcome that issue CSS Control Adapter is the answer. It will rendered div and unorderlist (UL) instead of table which can easily be redesign using CSS. It means, you can now have standardized approach to create web based controls. If you want to see what CSS Control Adapter provide you, Click Here and notice the HTML Snippet given at bottom. 

Ok, to start off lets download the source code and open the project. By the time I am writing this post only VS 2005 version of CSS Control Adapter is available. But that is  not an issue, If you are using VS 2008, simply convert the project. Even if you don’t want to open the project it still have no problem as we only need to copy paste some stuff from here.

Create A Web Application or Web Site Project in which you want to implement Menu Control. right click on your project and add special folder called App_Browser. Now Right Click on the newly created folder and Add Browser File and Name it “CSSFriendlyAdapters.browser”.

You can either write the following stuff in it or Just Copy / Paste this from CSS Control Adapter Project which you have downloaded before.

   1: <browsers>
   2:   <browser refID="Default">
   3:     <controlAdapters>
   4:       <adapter controlType="System.Web.UI.WebControls.Menu"
   5:                adapterType="CSSFriendly.MenuAdapter" />
   6:   
   7:     </controlAdapters>
   8:   </browser>
   9:  
  10:   <browser id="W3C_Validator" parentID="default">
  11:     <identification>
  12:       <userAgent match="^W3C_Validator" />
  13:     </identification>
  14:     <capabilities>
  15:       <capability name="browser"              value="W3C Validator" />
  16:       <capability name="ecmaScriptVersion"    value="1.2" />
  17:       <capability name="javascript"           value="true" />
  18:       <capability name="supportsCss"          value="true" />
  19:       <capability name="supportsCallback"     value="true" />
  20:       <capability name="tables"               value="true" />
  21:       <capability name="tagWriter"            value="System.Web.UI.HtmlTextWriter" />
  22:       <capability name="w3cdomversion"        value="1.0" />
  23:     </capabilities>
  24:   </browser>
  25: </browsers>

If you see the browser file available in CSS Control Adapter project you will realize that under ControlAdapter tag there are several other ControlType specified. But in our case as we are only using Menu Control so we have removed the un wanted stuff.

Now once you have done this, you need to add reference to the CSS Adapter. You can find the assembly in CSS Control Adapter Project.

Lets create a page and drop and Menu control. See the following snippet.

 

   1: <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssSelectorClass="SimpleEntertainmentMenu">
   2:      <Items>
   3:          <asp:MenuItem Text="Item 1" Value="Item 1">
   4:              <asp:MenuItem Text="Item a" Value="Item a">
   5:                  <asp:MenuItem Text="Item a - a" Value="Item a - a"></asp:MenuItem>
   6:              </asp:MenuItem>
   7:              <asp:MenuItem Text="Item B" Value="Item B"></asp:MenuItem>
   8:          </asp:MenuItem>
   9:          <asp:MenuItem Text="Item 2" Value="Item 2">
  10:              <asp:MenuItem Text="Item a" Value="Item a"></asp:MenuItem>
  11:          </asp:MenuItem>
  12:      </Items>
  13:  </asp:Menu>


Now we need to create a CSS file and linked that with the page we have created. The CSS File should like as below

   1: .SimpleEntertainmentMenu ul.AspNet-Menu /* Tier 1 */
   2: {
   3:     width: 13em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
   4: }
   5:  
   6: .SimpleEntertainmentMenu ul.AspNet-Menu ul  /* Tier 2 */
   7: {
   8:     width: 6em;
   9:     top: 100%;
  10:     left: 0;
  11:     font-weight:bold;
  12: }
  13:  
  14: .SimpleEntertainmentMenu ul.AspNet-Menu ul ul  /* Tier 3+ */
  15: {
  16:     top: 0%;
  17:     left: 6em;
  18:     font-weight:normal;
  19: }
  20:  
  21: .SimpleEntertainmentMenu li /* all list items */
  22: {
  23:     width: 6em;
  24:     background: #efefef;
  25: }
  26:  
  27: .SimpleEntertainmentMenu li:hover, /* list items being hovered over */
  28: .SimpleEntertainmentMenu li.AspNet-Menu-Hover
  29: {
  30:     background: Black;
  31: }
  32:  
  33: .SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
  34: .SimpleEntertainmentMenu span
  35: {
  36:     color: Black;
  37:     padding: 4px 2px 4px 8px;
  38:     border:1px solid #cccccc;
  39:     background: transparent url(arrowRight.gif) right center no-repeat;
  40: }
  41:  
  42: .SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, /* leaves */
  43: .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
  44: {
  45:     background-image: none !important;
  46: }
  47:  
  48: .SimpleEntertainmentMenu li:hover a, /* hovered text */
  49: .SimpleEntertainmentMenu li:hover span,
  50: .SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
  51: .SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
  52: .SimpleEntertainmentMenu li:hover li:hover a,
  53: .SimpleEntertainmentMenu li:hover li:hover span,
  54: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
  55: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
  56: .SimpleEntertainmentMenu li:hover li:hover li:hover a,
  57: .SimpleEntertainmentMenu li:hover li:hover li:hover span,
  58: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
  59: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
  60: {
  61:     color: White;
  62:     background: transparent url(activeArrowRight.gif) right center no-repeat;
  63: }
  64:  
  65: .SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
  66: .SimpleEntertainmentMenu li:hover li span,
  67: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
  68: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
  69: .SimpleEntertainmentMenu li:hover li:hover li a,
  70: .SimpleEntertainmentMenu li:hover li:hover li span,
  71: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
  72: .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
  73: {
  74:     color: Black;
  75:     background: transparent url(arrowRight.gif) right center no-repeat;
  76: }
  77:  
  78: .SimpleEntertainmentMenu .AspNet-Menu-Selected /* this tier is selected */
  79: {
  80:     border: solid 1px #00ff00 !important;
  81: }
  82:  
  83: .SimpleEntertainmentMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
  84: {
  85:     border: solid 1px #ff0000 !important;
  86: }
  87:  
  88: .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */
  89: {
  90:     border: solid 1px #0000ff !important;
  91: }
  92:  
  93: #EntertainmentMessage
  94: {
  95:     padding-top: 2em;
  96:     clear: both;
  97: }

 

Well that is pretty self describing, as I have already mention that the CSS Control adapter will rendered Divs and Unorder lists instead of table for Menu Control. Here we are simply specifying the style for Menu element on different level.

Once you have complete with the creation of CSS file, you need to link this with your page and for that 

   1: <link rel="stylesheet" href="/CSS/SimpleMenu.css" type="text/css" />

I have created the CSS File under CSS folder, which can be some thing else in your case.

That is it, it is pretty simple yet effective to use CSS Control Adapter with your asp.net application because it can give standardized HTML as output which is easy to design.
You can download the VS 2008 project file.