Multi Level ASP.NET Menu with CSS Friendly Control AdaptersBuilding the New Code Camp Web Site (Part 2)

Article Series

(Source Code Available in Article 6 Below – (Added March 2009))

Article 1: Best Practices for Building an ASP.NET quality web site
Article 2: Multi Level ASP.NET Menu with CSS Friendly Control Adapters
Article 3: Creating a Theme For Each Year of Code Camp Using Skins in ASP.NET
Article 4: Creating a Modal Login Window Using the Telerik Modal RadWindow Component
Article 5: Using LINQ to Merge Mailing Lists and Filter Opt Outs
Article 6: Multi Level ASP.NET Menu with CSS Friendly Control Adapters (The Source Code!)

 

Introduction

If you have complex styling issues involving ASP.NET we are experts and might be able to help. This technique is fairly old however newer methods could be used for similar results. Contact Peter Kellner and his associates here.

It’s often the case that brilliant designers will make interfaces that are hard to implement using standard frameworks like ASP.NET.  As Software engineers striving for consistency, we always want to do the best we can with the standard tool kits to take advantage for built in functionality.  ASP.NET 2.0’s built in menu system is a perfect example.  If you use that menu system, you get to make very simple declarative site maps by simply using the ASP.NET 2.0 Site Navigation Features.

The requirement faced today has to do with building the web site for our third annual code camp.  We have that brilliant designer I mentioned above, and he has made a design that just seems too perfect to compromise.  Here are some screen shots of how the designer envisions the sight looking and working after it is completed.

css1 

css2 

css3 

css4 

css5 

Notice the interesting behavior of the top menu (REGISTER;PROGRAM;NEWS;ABOUT AND WIKI).  Unselected, the bottom line strip is the same as selected.  When selected, the background of the selection changes to a different shade of the same color as the bottom strip.

Also notice the interesting behavior of the secondary menu. that is, when ABOUT is selected from the top menu, notice that the secondary menu shows: Contact;Venue;Organizers;Sponsors and Previous.  As you can see above (on the bottom of the 5 pictures), when Venu is selected, it is highlighted to in bright white to indicate that you have selected that.  The really cool part here is that the ABOUT on the primary menu stays highlighted when you choose different  secondary menu choices.

Why Go Through The Trouble, why not just do it with HTML and CSS directly

So, a reasonable person might say that since you can’t easily get this behavior with the asp:menu control and the site map provider (OK, at least I couldn’t figure it out), why not just code this up with simple list items, button clicks and a pile of code to react to those things?  Well, the answer is you can certainly do that.  The problem is the next time you want to do something similar you will find yourself doing a lot of cut and pasting.  Personally, whenever I find myself cutting and pasting a lot I know I should probably think about how to refactor the code to make it more reusable and therefore more reliable.

What Are the Benefits of Using asp:menu and the site map providers

I mentioned that there are benefits to using the asp:menu and site map providers.  What are those benefits you might ask.  Well, let me first show you what you have to do to set up a simple menu system using these, then list the benefits of what comes out.

The Web.SiteMap

First, you need to create a web.sitemap file in your web directory.  Here is what a simple one looks like similar to what will create the pictures above.

<?xml version="1.0" encoding="utf-8" ?>

 

   <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

 

      <siteMapNode url="Default.aspx" title="HOME" description="Silicon Valley CodeCamp 08">

 

            <siteMapNode url="Register.aspx" title="REGISTER"  description="" />

 

            <siteMapNode url="News.aspx" title="NEWS"  description="" />

 

            <siteMapNode url="About.aspx" title="ABOUT"  description="">

 

            <siteMapNode url="Contact.aspx" title="Contact"  description="" />

 

            <siteMapNode url="Sponsors.aspx" title="Sponsors"  description="" />

 

            <siteMapNode url="Previous.aspx" title="Previous"  description="" />

 

         </siteMapNode>

 

      </siteMapNode>

 

   </siteMap>

The Web.Config

You need to declare which sitemap provider you are using. In our case, we are simply reading from a file.  Then, you should (do not have to) declare a section for each web page you want to provide role access to.  Here is an example of my web.config. This first part says give access to any logged in user for Sponsors.aspx

<location path="Sponsors.aspx">

 

    <system.web>

 

        <authorization>

 

            <deny users="?"/>

 

        </authorization>

 

    </system.web>

 

</location>

 

</configuration>

The Second part defines the Site Map Provider and sets securityTrimming to true to only show pages the user has access to.

<system.web>

 

    <siteMap defaultProvider="XmlSiteMapProvider" enabled="true">

 

    <providers>

 

        <add name="XmlSiteMapProvider"

 

        description="SiteMap provider which reads in .sitemap XML files."

 

        type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0,... 

 

        siteMapFile="web.sitemap" securityTrimmingEnabled="true"/>

 

    </providers>

 

    </siteMap>

 


The Master Page

In your master page, you need to define your primary menu.  In our case, it is the one that displays: REGISTER;NEWS and ABOUT.  Here is all you need for that.

    <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal"

 

        DataSourceID="SiteMapMain" CssClass="headLinksBar"  CssSelectorClass="SimpleEntertainmentMenu"

 

        MaximumDynamicDisplayLevels="0" StaticItemFormatString="// {0} &nbsp;&nbsp;&nbsp; ">

 

    </asp:Menu>

 

<asp:SiteMapDataSource ID="SiteMapMain" runat="server" ShowStartingNode="False" />

The Inherited Page (About.aspx For Example)

<asp:Content ID="SublinksSessions" ContentPlaceHolderID="Sublinks" runat="server">

 

    <asp:Menu ID="subMenu" runat="server" DataSourceID="SiteMapAbout" SkinID="subMenu"  CssClass="headLinksBar"

 

    CssSelectorClass="SimpleEntertainmentMenu"     >

 

    </asp:Menu>

 

</asp:Content>

 


And the Benefits…

  • You have no .net code to write!
  • Adding new menu items as Primary or Secondary is easy
  • Security is completely taken care of
  • Menu Entries Automatically come and go based on User Permission

Not Using the CSS Friendly Adapters

 

If you do not use the CSS Friendly Adapter library, the menu render using tables.
Below is what the actual HTML looks like of the main menu if I remove the

CSS Friendly Adapters.

<table>

 

    <a href="#ctl00_mainMenu_SkipLink">

 

        <img alt="Skip Navigation Links" src="/WebStyleOnly%20-%20Copy/WebResource.axd?d=G5" width="0" height="0" style="border-width: 0px;" />

 

    </a>

 

    <table id="ctl00_mainMenu" class="headLinksBar ctl00_mainMenu_2" cssselectorclass="SimpleEntertainmentMenu" cellpadding="0" cellspacing="0" border="0">

 

        <tr>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun0">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                    <tr>

 

                        <td style="white-space: nowrap;">

 

                            <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/Register.aspx">

 

                                // REGISTER

 

                            </a>

 

                        </td>

 

                    </tr>

 

                </table>

 

            </td>

 

            <td style="width: 3px;">

 

            </td>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun1">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                <tr>

 

                    <td style="white-space: nowrap;">

 

                        <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/News.aspx">

 

                            // NEWS

 

                        </a>

 

                    </td>

 

                </tr>

 

                </table>

 

            </td>

 

            <td style="width: 3px;">

 

            </td>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun2">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                    <tr>

 

                        <td style="white-space: nowrap;">

 

                            <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/About.aspx">

 

                                // ABOUT

 

                            </a>

 

                        </td>

 

                    </tr>

 

                </table>

 

            </td>

 

            </span>

 

        </tr>

 

</table>

The same code, when using the CSS Friendly adapters, plus some clever additions that will be discussed later, has the html code looking like the following.

<table>

 

    <tr>

 

        <div class="AspNet-Menu-Horizontal">

 

            <ul class="AspNet-Menu">

 

                <li class="AspNet-Menu-TopLevel-register">

 

                    <a href="/WebStyleOnly - Copy/Register.aspx">

 

                      REGISTER

 

                     </a>

 

                </li>

 

                 <li class="AspNet-Menu-TopLevel-news">

 

                    <a href="/WebStyleOnly - Copy/News.aspx">NEWS</a>

 

                </li>

 

                <li class="AspNet-Menu-TopLevel-about-Selected">

 

                    <a href="/WebStyleOnly - Copy/About.aspx">

 

                      ABOUT</a>

 

                </li>

 

            </ul>

 

         </div>

 

     </tr>

 

 </table>

You can see that the CSS adapter code is not only much smaller, but easier to read and because of the inserted class names, much easier to customize.

Conclusions

We have not made clear yet how the CSS Friendly Adapters will make the menu’s work the way we want it to. We have shown css classes created (AspNet-Menu-TopLevel-about-Selected for example) are create by the custom code written by us in the CSS Friendly Adapter Project.  We have however talked about the menu control and showed an example of how the html is actually rendered, and what is rendered based on.  That is, the web.sitemap defines the menu and we have shown that.  In the next article, we will show details of the custom code we have in the CSS Friendly Adapter that solves the problem of how to highlight the menu choices based on what is clicked.

About Peter Kellner

Follow me:


Comments

  1. This was an interesting article. I have problems with the loading speed of ASP.NET though, but it my be my pc. I am in the process of creating a spring break 2013 website with ASP and it’s so slow. Any tips?

  2. ewanlewis says:

    This is a very good article. It is hard to understand how they managed to pull off something like that. Keep up the good work.
    how to get rid of fruit flies naturally
    how to get rid of double chin with exercise

  3. i’m very confusing how to add menu in asp.net. can u send sample source code for my mail add. mail id – nadeekadn@gmail.com

    Thank you.

  4. spotlight111 says:

    This article is well thought out and full of good information. Many Thanks for taking time to bring this together into one article. cyprus international trusts

  5. Mulheres Sexo says:

    of the time now if the designer nows how to program or not.

  6. Looks good to me. Its a shame that I’m not very good at coding.
    Thanks. Using it.

  7. Right on spot. Thanx for this info. This is important for me, will bookmark, and refer with link to this page. More should use this.

  8. jennywalia07 says:

    Great blog article about this topic,I have been lately in your blog once or twice now.I just wanted to say hi and show my thanks for the information provided.
    silver value per ounce

  9. backpacking Australia says:

    I’m really impressed that there’s so much about this subject that’s been uncovered and you did it so well, with so much class.

  10. Nice example. Do you have all files available for download?

  11. I’m a programmer and a designer myself. But I do a lot of programmer jobs where I get designs sent to me. And by looking at the design you can almost 100% of the time now if the designer nows how to program or not.

    I have been up to designs where the designer is not have any consistency in his/hers design which will make my job as a programmer much harder.

  12. Coupon Roxanne says:

    Interesting article on coding, but I would rather be shopping at Sears and using

  13. propane outdoor fire pits says:

    What a great article. I have found this site to be very worthwhile.

  14. I would like to show thanks to the writer just for bailing me out of this particular setting. After researching through the search engines and meeting notions which were not beneficial, I believed my life was over. Being alive without the presence of solutions to the issues you’ve sorted out by way of the short post is a critical case, and the ones that might have adversely affected my entire career if I had not noticed your blog post. That training and kindness in dealing with every aspect was important. I don’t know what I would’ve done if I hadn’t discovered such a stuff like this. I can also at this time look ahead to my future. Thank you very much for the skilled and amazing help. I won’t be reluctant to propose your blog to anyone who needs to have tips on this topic.

  15. The acute is added than average, yet they absolutely are not bright, that is not basically a awful issue. The mids attending to become excellent. i favor my Grados SR60s, yet they’re an accessible ear architecture and cannot be performed anon afterwards you are abreast to humans unless you admiration them to accept for your tunes.

  16. I am trying to modernize our website and this gives me some great insight to incorporate. You do an especially good job of laying it out as a course might.

  17. You have made a very complicated subject easy to understand. Thanks for breaking it down for us. ccna salary

  18. Nail Art designs good to know it

  19. Nail Art designs says:

    It is good, but I like more MySQL.

  20. Susanna Tottingham says:

    Heya i’m for the first time here. I found this board and I in finding It truly useful & it helped me out much. I am hoping to give one thing again and aid others like you helped me.

  21. This is a great article. Thank you! I am trying to learn ASP.net, but it isn’t going quickly for me. I’m more of a designer than programmer, so it is a big switch for me. This article is very helpful, however.

    Cheers
    Caspar

  22. I must say that I’ve always used PHP, but I appreciate learning new things and look forward to more.

  23. very nice website& nice work
    Great work indeed. I am learning ASP.net slowly and the article is really a great help
    http:freecoolstpictures.com

  24. Wow this really give some deep insight in ASP.NET, thanks for the share!

  25. This is great info. I am trying to modernize our website and this gives me some great insight to incorporate. You do an especially good job of laying it out as a course might.

  26. Good article, trying to learn as much as I can about ASP.NET, I’ve got a lot of learning to do but it should be worth it in the end.
    Vitamin B12 Shots

  27. These monster beats by monster beats outlet are absurd for these genres.The assemble top superior seems sensible. they are abundantly comfy. The bass is nice. Not boomy….just tight, almighty and crisp. monster headphones accepted the assume is admirable for what I accept too.The acute is added than average, yet they absolutely are not bright, that is not basically a awful issue. The mids attending to become excellent. i favor my Grados SR60s, yet they’re an accessible ear architecture and cannot be performed anon afterwards you are abreast to humans unless you admiration them to accept for your tunes.

  28. AHOLE AHOLE says:

    HEY DICK IN GOATS AHOLE WHERE IS SOME SOURCE CODE FOR DOWNLOAD
    YOU GOAT HUMPING MUSLIM

  29. This is a great article. Thank you! I am trying to learn ASP.net, but it isn’t going quickly for me. I’m more of a designer than programmer, so it is a big switch for me. This article is very helpful, however. Thanks.

  30. thanks its nice eset malaysia
    eset software

  31. thanks niuce great iste and i have added in my favorites list

  32. Until now I’ve used just ASP code but the ASP.NET seems to be better than my solution. However, is requires a lot

  33. 1 3 dimethylamylamine says:

    seems to help me a lot because I’ve just decided to migrate to ASP.NET One of these things it’s the migration, very easy

  34. i dont know how to clear the menu values in asp.net in the page load time . plz help anyone ….

  35. This step by step tutorial seems to help me a lot because I’ve just decided to migrate to ASP.NET One of these things it’s the migration, very easy to perform with the help of your tutorial. Thank you !

  36. Rca Ieftin says:

    I want to migrate to the ASP.NET solution. Until now I’ve used just ASP code but the ASP.NET seems to be better than my solution. However, is requires a lot of knowledge because the code seems to be a little bit difficult comparing with ASP. However, I am decided to learn this new thing. I am glad to see that you show your work to others and you are able to explain how this code works.

  37. AN interesting article, i’m a classic ASP developer that is gradually acclimatising to ASP.NET…I’m puzzled by JesseP comment – ASP is a server-side technology, css and html5 are client side.

  38. I’m using the CSS Friendly Menu with two Menu controls and two SiteMapDatasouce on Master, Content pages

  39. transfer music from ipod to computer says:

    I do not really have a great deal to say in reply, I only this minute wanted to comment to say excellent work. The both of us genuinely loved your point of view. It seems like you’ve put a good amount of effort into your post and we require much more of these on the web these days.

  40. Great post! Now that HTML 5 is out along with newer CSS, do you still think ASP is the best solution?

  41. Thanks for really good article. It seems that someone did a great work for all of us. What else I could say? Keep up the good work and don’t be shy :)

  42. Looks good to me. Its a shame that I’m not very good at coding.

  43. At a high-level, the new Site Navigation features allow you to define (outside of code or pages) the “site map” structure of how your site is laid out. Specifically, it allows you to define the relationships between pages on the site – what is the “home” entry-point, what are the sub-sections of it, and how individual pages fit within it. This information is cached by ASP.NET, and you can then get access to this sitemap structure at runtime.

  44. I have not come across any components yet that can match this. So it’s quite an awesome coding. Thanks for sharing with us.

  45. vipin bardia says:

    hi pete
    i am trying to sort out same kind of prob.
    but i cant understand that what are css-adapters.
    can u tell me in brief

    thanx & Regards.

  46. Great work indeed. I am learning ASP.net slowly and the article is really a great help. Thanks a bunch

  47. love your blogg!!

  48. Love the coding. I’ve been having trouble with some of my coding and this article really helped me out figure out the problem. Thank you very much.

  49. Great work with the coding indeed. I have not come across any components yet that can match this. So it’s quite an awesome coding. Thanks for sharing with us. I will surely send this around to my pals. Cheers

  50. Hi Peter
    It’s Great work.
    I am unable to have a menu item in two line on one page only.
    Is there a solution.
    plz reply on my id
    Thanks.

  51. Dave Gaffney says:

    Hi Peter

    Great work. On headLinksBar I am unable to have a menu made up of a name with a space ie Customer Admin. You have shown it working in the sub menu.

    Is there a solution?

    cheers

  52. So – the DataSource for SiteMapAbout, for example, is internally mapped by ASP.NET to the sitemap control’s “ABOUT” title’d node?

    Is the name of the data source derived from the node title?

  53. I just published the source code for these at this location: http://peterkellner.net/2009/03/27/codecampwebsiteseries6-cssfriendly-adapters-aspnet-menu/ -Peter

  54. Hi,

    I did try but failed to acheive any result, being new to asp.net. Please post a running code.

    Thanks

  55. I’ve installed and used CSSF. I set set propertied to display horizontally. But code created by CSSF is a list. UL. Which displays as a tree view. How do i display horizontally? Do I need to recode the menu by hand?

  56. Hi,
    I dont’t know how to set the SiteMapDataSource for SiteMapAbout.
    Thx.

  57. Hi,

    I m new to this control.
    I tried to implement but i cant get.
    Can you pleaz provide me Zip folder from which i download whole code.
    Thanks in advance.

  58. Wow a fantastic site, I loved it when I landed on it. I could never do anything like this, maybe I should open a competition for someone to redesin mine. :-)

  59. I don’t have a full working stand alone example yet. I’m hoping to make another post that will include that but have been pretty busy lately. Sorry. Maybe someone else has a working example of this.

  60. I appreciate your example, but I cannot get the sub menu styles working. Can you provide a download of the working app?

  61. Hi Pete,
    It would be gr8 to post the helpful information on “Dynamic menu creation in Asp.net”. The menu items which i am using in my application is role specific; My question is ” storing the menu Items in database is good idea”.

    waiting for your reply.

    Thanks,
    Subhas

  62. I will refer people to your ITEMS. Effective use of WordPress had some exceptional.This looks good! Really good tutorial include so many helpful informations!

  63. > I don’t understand why table and tr tags are used in the css menu in the second code snippet. What’s up with that?

    Hi Yoyo,

    I’m not a browser/css wizard, but the guy who helped me with the css said that using table solved some browser issues. I think it may have been an ie6 issue.

  64. Oops!

    What I meant to say is:

    I don’t understand why table and tr tags are used in the css menu in the second code snippet. What’s up with that?

  65. I don’t understand why and tags are used in the css menu in the second code snippet. What’s up with that?

  66. Very good article, Although I’m still struggling to fully implement this, feel I’m missing the next step on how to customise the CSS classes. Sorry I’m not very experienced with ASP.NET. Could you give me any pointers.

    Thanks again
    Ian

  67. Very interesting article, so many useful informations,
    really good work!
    thx for nice reading

  68. Thank you Peter.

  69. Hi Peter,

    I have the same question Nancy has. Any idea on when you’ll be able to post a solution for adding custom class names to the li elements?

    Thanks,
    Jason

  70. Hi, Peter

    This is just what I need to implement to my site.
    I was wondering.. if You can post the code for Venue.aspx and the codebehind.
    That’ll help me.

    Thanks
    Harry

  71. Peter Kellner says:

    Nancy,
    I do plan a follow up post. Just have been busy lately.

  72. Hello Peter,
    I’m interested in finding out how to customize the menu adapter to include the name of the specific menu item in the class. For example ‘class=”AspNet-Menu-TopLevel-about-Selected”>’. How do you get it to add the ‘about’ part? Is there another part to this article that explains that?

    Thanks for your help,
    Nancy

  73. Hi Peter,

    Come across your article today and found out this is exactly what I’m trying to do at the moment. I’m using the CSS Friendly Menu with two Menu controls and two SiteMapDatasouce on Master, Content pages.

    I’m looking around the MenuAdapter.cs and not sure where to start of, will you possible give me some suggestions? Is you next article will be publishing soon?

    Best Regards,
    Chris

Trackbacks

  1. Plekanec’s ice time has dwindled under new Canadiens coach « gesoragulu says:

    […] encounters of the third kind pulmonary embolism meryl streep sacramento kings drew brees drew brees packages Share this:TwitterFacebookLike this:LikeBe the first to like this […]

  2. Felice Arenas: The Iron Lady Director on Criticism: ‘Gird Your Loins’ « gesoragulu says:

    […] time lsu alabama earthquake when is daylight savings 2011 what time is it lsu vs alabama cain gingrich debate Share this:TwitterFacebookLike this:LikeBe the […]

  3. Silence is golden: ‘Artist’ leads French-y Globes | efubodufa says:

    […] college pa wilson ramos kidnapped mcqueary mike mcqueary joe paterno fired joe paterno fired glen campbell Share this:TwitterFacebookLike this:LikeBe the first to like this […]

  4. […] with the ASP.NET Menu control and the CSS Friendly Control Adapters, it can be used to automatically generate navigation for your […]

Your Comments

*

Protected with IP Blacklist CloudIP Blacklist Cloud

Follow

Get every new post delivered to your Inbox

Join other followers: