Today I finally converted the navigation menu of our website as an unordered list, which is originally built with TABLEs and so ugly for SEO. It is updated with DNN Nav Menu, which is a lightweight menu based on semantic markup like UL, LI tags. It will help search engines to better understand the menu structure. So it is an excellent news for us and our website with ultimate dnn blog module – SunBlogNuke. Maybe you also like me have always been struggling with the CSS for the table-based menu. Now you can relax yourself and enjoy more interesting stuffs. The update process is so easy that you just replace the original menu with the following code:

<dnn:NAV runat="server" id="dnnNAV" CSSControl="mainMenu" IndicateChildren="false" ProviderName="DNNMenuNavigationProvider">
    <CustomAttributes>
        <dnn:customattribute value="UnorderedList" name="RenderMode" />
    </CustomAttributes>
</dnn:NAV>

Note that it adds "CustomAttributes" to the NAV tag and you also make sure to add the declaration below to your skin, otherwise the CustomAttribute tags cause an error, which prevent the skin from loading.

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.Skins" Assembly="DotNetNuke" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>

You now can style the menu how you like to using the css classes below:

Class Description Sample Explanation
.m All Sub Menu .m All sub menus
.m[level] Sub Menu at Level x .m0 First level sub menus
.mid[id] Sub Menu with ID x .mid39 DNN Admin Sub Menu
.break Break .break All menu breaks
.mi Menu Item (all) .mi All Menu Items
.id Menu Item with ID x .id41 Menu Item with ID 41
.mi[path] Menu Item in Specific Path .mi0
.mi1-0		 First Menu Item (Home)
First child of second root menu
.root Root Menu Item .root All root menu items
.first First Menu Item .first
.root.first		 First menu item in each menu
First menu item in root only
.last Last Menu Item .last
.first.last		 Last menu item in each menu
Menu items with only one item (both 1st and last)
.icn Icon .first.icn First Icon container in all menus
.hov Hover .root.first.hov First menu item hover
.sel Selected .m .sel Selected sub menu items
.bc BreadCrumb .m .bc Breadcrum sub menu items
.txt Text (Coming Soon!) .m .txt Text portion of all sub menu items
Not Implemented Yet
* All child elements .m .mi * All elements within menu item

Also we updated the Testimonials page and build one awesome testimonials slider widget in the home page by following the tutorial - Turn Content Slider Widget into a jQuery Carousel. More we modify lightly our team blog page with an attractive dnn container in the sidebar. Hope that our clients enjoy those enhancements. Smile