ASP.NET Menu with jQuery Superfish

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.

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.

view sourceprint?

01.<asp:Menu ID="mnu" runat="server" CssSelectorClass="myMenu">

02.    <Items>

03.        <asp:MenuItem NavigateUrl="#" Text="Item1">

04.            <asp:MenuItem NavigateUrl="#" Text="Sub1 Item1"></asp:MenuItem>

05.            <asp:MenuItem NavigateUrl="#" Text="Sub1 Item2"></asp:MenuItem>

06.            <asp:MenuItem NavigateUrl="#" Text="Sub1 Item3"></asp:MenuItem>

07.            <asp:MenuItem NavigateUrl="#" Text="Sub1 Item4"></asp:MenuItem>

08.        </asp:MenuItem>

09.        <asp:MenuItem NavigateUrl="#" Text="Item2">

10.            <asp:MenuItem NavigateUrl="#" Text="Sub2 Item1"></asp:MenuItem>

11.            <asp:MenuItem NavigateUrl="#" Text="Sub2 Item2"></asp:MenuItem>

12.            <asp:MenuItem NavigateUrl="#" Text="Sub2 Item3">

13.                <asp:MenuItem NavigateUrl="#"

14.                              Text="Sub2 Item3 Item1 and some

15.                                    very very very long text">

16.                </asp:MenuItem>

17.                <asp:MenuItem NavigateUrl="#" Text="Sub2 Item3 Item2"></asp:MenuItem>

18.                <asp:MenuItem NavigateUrl="#" Text="Sub2 Item3 Item3"></asp:MenuItem>

19.            </asp:MenuItem>

20.        </asp:MenuItem>

21.        <asp:MenuItem NavigateUrl="#" Text="Item3">

22.            <asp:MenuItem NavigateUrl="#" Text="Sub3 Item1"></asp:MenuItem>

23.            <asp:MenuItem NavigateUrl="#" Text="Sub3 Item2"></asp:MenuItem>

24.            <asp:MenuItem NavigateUrl="#" Text="Sub3 Item3"></asp:MenuItem>

25.        </asp:MenuItem>

26.        <asp:MenuItem NavigateUrl="#" Text="Item4"></asp:MenuItem>

27.    </Items>

28.</asp:Menu>

The necessary JavaScript:

view sourceprint?

01.<script type="text/javascript">

02.    // initialize plugins

03.    $(function() {

04.        $("ul.sf-menu").supersubs({

05.            minWidth: 13,

06.            maxWidth: 40,

07.            extraWidth: 5

08.        }).superfish();

09.    });

10.</script>

And the outcome looks like …


View More Detail & Source Code : http://blog.dreamlabsolutions.com/post/2009/08/09/ASPNET-Menu-with-jQuery-Superfish.aspx