Choosing the right type of menu for a website is not easy at all. The ASP.NET Menu Control is definitely NOT a good starting point due to the horrendous markup it renders, nor is it good for SEO because of the Markup/Content ratio, neither can it be easily styled.
Of course there is the CSSFriendly Control Adapters project that started back in 2006, which made the the ASP.NET Menu (and many other ghastly markup rendering controls) render beautiful <div> based markup. In the case of the Menu it rendered <div> and <ul>-<li> type markup which is probably the most widely spread technique used for creating menus known to mankind.
To every upside there is a downside. Although there are some examples online for both integration and styling I really find the CssFriendly Menu Adapter a bit difficult to style. The online example shows the styling technique on 3 different levels which then results in a huge CSS file. To give it some credit, the supplied CSS example is extremely well commented, so one with little CSS experience will do just fine.
But in Mythbusters tradition: “If it’s worth doing, it’s worth overdoing”, the idea is to use a modified version of the CssFriendly Menu adapter with the jQuery Superfish plugin.
I’ve renamed all the css class names in the CssFriendly project (the ones like: “AspNet-Menu-Vertical”, “AspNet-Menu-Leaf”, “AspNet-Menu-WithChildren”) to their Superfish equivalent ("sf-menu”, “sf-with-ul”, etc.). Now you can use the jQuery Superfish Menu Plugin out of the box with it’s standard css class names.
You need use the same sort of markup for your server side ASP.NET Menu control like you’ve used with the standard CssFriendly Menu Adapter, and make the JavaScript call needed to set the Superfish plugin up.
<asp:Menu ID="mnu" runat="server" CssSelectorClass="myMenu">
<Items>
<asp:MenuItem NavigateUrl="#" Text="Item1">
<asp:MenuItem NavigateUrl="#" Text="Sub1 Item1"></asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub1 Item2"></asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub1 Item3"></asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub1 Item4"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Item2">
<asp:MenuItem NavigateUrl="#" Text="Sub2 Item1"></asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub2 Item2"></asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub2 Item3">
<asp:MenuItem NavigateUrl="#"
Text="Sub2 Item3 Item1 and some
very very very long text">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub2 Item3 Item2"></asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub2 Item3 Item3"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Item3">
<asp:MenuItem NavigateUrl="#" Text="Sub3 Item1"></asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub3 Item2"></asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Sub3 Item3"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="#" Text="Item4"></asp:MenuItem>
</Items>
</asp:Menu>
The necessary JavaScript:
<script type="text/javascript">
// initialize plugins
$(function() {
$("ul.sf-menu").supersubs({
minWidth: 13,
maxWidth: 40,
extraWidth: 5
}).superfish();
});
</script>
And the outcome looks like …
I like it allot how you can take advantage of jQuery and make this menu animate when submenu items open, I also like how easy it is to create and maintain the css for the menu. Then there is the fact that you can couple Superfish with other plugins like bgIframe, hoverIntent, and also Supersubs, which enables you to resize the width of submenu items independently according to the longest item within that group. Most of all, I like how my menu looks the same in all browsers including that … IE6 – no comment here.
The downside is that there is no graceful degradation. But this is always a problem with ASP.NET Webforms with that __doPostback function() and as I’m building the whole functionality upon jQuery the full featured JavaScript library the website has no sense without JavaScript.
I would like to point out that I have not created the CssFriendly Menu Control Adapter, I have only renamed the css class names, so no copyright infringement intended.
The CssFriendly project pages:
jQuery Superfish plugin:
Download the solution containing a sample website and the altered CssFriendly Menu Adapter project: CssFriendly ASP.NET Menu with Superfish.
What do you use to create a menu with ASP.NET?