ASP .Net Menu using ordered list – ul, li concept


I give a different approach to menu creation, in my ASP .Net project. The main wins being the performance and ease of use. Asp menu is pretty messy when you look at the code behind and the page size it adds. But use this concept only if performance is a critical factor.
Concept:
•    Use of ordered list (ul and li) and css smartly to construct the menu’s. Check any standard sites (www.apple.com) They use this concept.
•    Aspx design with divs only. ASP menu create Tables that are pretty messy and affects the page performance.

Screenshot:


Advantage:
•    Page is light weight
•    No table structure, only divs
•    The page menu loads like a normal html and is pretty cool and fast. It does not have any server tags also… eh except for the one div into which I have to add the codebehind menu result.

Codebehind:
•    Setup a usercontrol for this. Add it to master page.
•    Basic concept is to create the <ul> <li> <a> sections through codebehind. Use template concept, as defined below:

•    Use string.Format : string liSbTemp = string.Format(liTemplate, “link1”, “’active’”, “|”));
•    Use stringbuilder.append and so on…
•    Use for-loops effectively along with the above template(string.format({0}{1})), stringbuilder, LINQ(for querying through the list returned by the db) and structure a menu as below:

•    ‘ctl100_nvgMenu_divNavigator’ is the div with runat=server, into which I add my stringbuilder result.
•    ‘GlobalNav’ div is a wrapper to the full menu.
•    ‘mainNav’ <ul> has the main navigation tab anchor tags(<a>), with its own <li>
•    ‘subNav’ <ul> has the sub menu sections, with its own <li>
•    At the end, add the stringbuilder result to a div-divNavigator(which has a runat server attribute… only 1 runat server or do findcontrol and add it to a div on the page)
•    Use innerHtml (ctl100_nvgMenu_divNavigator.innerHtml ) to add it to the ‘divNavigator’ or else you will have some issue with the EnableEventValidation attribute in the page directive, during navigation.

Css: I am sharing the full css selector list here
#header #globalNav
{
padding-left: 8px;
padding-right: 8px;
}

#header #globalNav ul
{
padding: 1px 0px 0px 0px;
margin: 0;
list-style: none;
}

#header #globalNav ul li
{
float: left;
}

/* Start – Main Nav */

#globalNav ul#mainNav
{
font-size: 14px;
height: 27px;
}

ul#mainNav li a
{
color: #ffffff;
text-decoration: none;
line-height: 27px;
padding: 0 10px 0 9px;
}

ul#mainNav li.active
{
background: url(../../Resources/images/mainNav_left.gif) no-repeat;
}

ul#mainNav li.active a
{
background: url(../../Resources/images/mainNav_rt.gif) no-repeat right;
display: block;
color: #0D8695;
cursor: default;
}

/* End – Main Nav */

/* Start – Sub Nav */

#globalNav ul.subNav
{
border-bottom: 1px solid #C2CEDA;
height: 23px;
}
ul.subNav li
{
padding-right: 10px;
}
ul.subNav li a
{
color: #666666;
text-decoration: none;
line-height: 23px;
margin: 0 10px 0 0;
}

ul.subNav li a:hover
{
color: #0D8695;
}

ul.subNav li.active a
{
color: #0D8695;
cursor: default;
}

ul.subNav li.active a:hover
{
color: #0D8695;
text-decoration: none;
}

Voila… you have a light weight and powerful menu to boast off…

I totally respect the asp:Menu’s, but I am totally against using tables in any site… they are really primitive…  Hope Microsoft introduce div designs for the asp:Menu…

NB: To get a good head start, check the html source of apple site menu…..

14 thoughts on “ASP .Net Menu using ordered list – ul, li concept

  1. I think more writers ought to write with enthusiasm just like you.
    Even informational articles like this can have character.
    That’s what you have injected in this informative post. Your perspectives are very unique.

  2. HEy hey that’s pretty amazing article, well done, well i am in between of writing an ebook which will go for sale on amazon, i was wondering if i could use article with proper credits ofcourse, only if you allow

    1. Sure…you can use this article.
      Once done with your book, i would really appreciate if you could share the details of the book here.

      Happy to help.

  3. Do you have a spam problem on this blog; I also
    am a blogger, and I was wondering your situation; we have created some nice practices and we are
    looking to swap solutions with others, please shoot me
    an email if interested.

  4. I have been surfing online more than three hours today, yet I never
    found any interesting article like yours. It is pretty worth enough
    for me. In my view, if all website owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

  5. I think this is one of the most vital information for me.
    And i am glad reading your article. But wanna remark on few general things,
    The website style is great, the articles is really great :
    D. Good job, cheers

  6. Pingback: cialis
  7. Simply desire to say your article is as astonishing.
    The clarity in your post is simply excellent and
    i could assume you are an expert on this subject.
    Fine with your permission let me to grab your feed to keep updated with forthcoming post.
    Thanks a million and please keep up the rewarding work.

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s