Integrating CSS Control Adapter With Menu Control

Author: aghausman | Posted: 1. March 2009 21:35 8

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.

Tags: Using-CSS-Control-Adapter, CSS-Control-Adapter-with-Menu, CSS-Control-Adapter-with-aspnet

asp.net | CSS

Bad Credit Auto Loan Refinance , on 9/24/2009 9:18:52 PM Said:

u rock man
help css style

p-u-t , on 9/24/2009 9:26:33 PM Said:

I am involved in css style sheet coding and page / form element positioning at the present moment and was drawn by the article, " Integrating CSS Control Adapter With Menu Control " , in the search engines. The ambition of employing css to produce a clear layout in all the major web browsers, IE, Firefox, Safari and Google Chrome seems a great head ache which usually takes numerous hours to overcome. Engrossing to study your opinions and the remarks in your web site on the subject. I feel the tutorial websites are inert and address the same items, comments and dialog in blogs frequently references genuine methods to overcome issues or the optimal ways to attack online design. Thank you for the post.

panini , on 9/30/2009 2:30:04 PM Said:

another nice article you have here.you are too kind to grant your readers request. but i admired it.

Canon ink cartridges , on 10/5/2009 2:44:24 AM Said:

Is this technique can be used to combine css files...?

gioco del poker , on 10/11/2009 2:05:34 AM Said:

Excellent post you have here.PageRank has also been used to rank spaces or streets to predict how many people (pedestrians or vehicles) come to the individual spaces or streets.Thanks for sharing this article.

cocktail dresses , on 12/16/2009 4:41:58 AM Said:

you all do such a great job at such Concepts... can't tell you how much I, for one appreciate all you do!

taux hypothecaire , on 12/21/2009 5:48:43 PM Said:

I admit, I have not been on this webpage in a long time... however it was another joy to see It is such an important topic and ignored by so many, even professionals. I thank you to help making people more aware of possible issues.
Great stuff as usual...

naruto episodes , on 1/7/2010 6:03:46 PM Said: