As I am sure that many of the regular readers of this site have noticed I recently changed my website navigation structure and overall skin design. As part of this site re-design I switched away from the standard DotNetNuke Menu control to using the “Css NavMenu” provided by Snapsis. This article will be a detailed review of this skin object and the ease of use to implement as well as the noticed benefits over the standard DotNetNuke menu.

Skin Object Installation Process

The installation process for the skin object was painless. There is one simple PA that must be installed via the “Module Definitions” section of the website. After installing the skin object I proceeded to install a few of the demonstration skin packages that were provided to demonstrate the abilities of the module. This process as well went very smooth following all standard DotNetNuke skin installation procedures. In all 7 demonstration skins were provided and 1 of these provided a layout very similar to my desired layout.

Using the Object

After many very painful attempts at trying to skin the DotNetNuke menu control I went into using this component a bit leery as for me CSS items are one thing that I don’t like to deal with. Luckily those fears were quickly expelled as soon as I found out how easy it was to get the menu component setup.

My first step was to make an “Admin Only” drop down menu to handle links to all administrative functions. This process was very simple, below is the code needed to create this type of menu.

<snapsis:navmenu runat="server" includetabs="Admin,Host" type="SelectList" level="0-1" id="AdminHostList"></snapsis:navmenu>

As you can see we only specify 3 extra parameters to get this menu created. I specified the Level to indicate that I wanted the first and second levels, then I noted that it should be a select list, and lastly I told it to only include the Admin and Host tabs. This results in a menu that looks like this when logged in as an admin.

Admin Menu Display

I was amazed at how quickly I was able to accomplish this. Now it was on to create the actual right side navigation. To accomplish this I referred to the documentation that was included with the CSS Nav Menu package and I have to say that I was very impressed. Snapsis covers every property in great detail and includes detailed examples of how to accomplish the desired styles using CSS.

The entire process to adapt the sample menu to meet my needs took me about 1 hour until I was able to get all colors and styles to meet my requirements. After completing this step I packaged up my skin (following standard skin packaging procedures) and installed it on my site for final testing.

Production Results

After implementing this menu on my website I was amazed at the instant performance improvements. I noticed that my average page load times were reduced by 50%, a difference that I couldn’t even begin to expect with this change. I used the “FasterFox” FireFox utility to perform the page load comparisons to ensure that accurate timings were completed.

Additionally I visited my website using a text browser and for the first time ever I was able to see ALL site links due to the standard HTML rendering provided by the CSS Nav Menu. The last check that I completed was to look at the size of my total page request and I noticed that it was reduced quite a bit as well due to the straight HTML that is rendered and the lack of external javascript libraries.

Overall I am incredibly impressed with the quality of this product and I have only begun to scratch the surface of the features that are supported. My hat is off to Snapsis for packaging such a well documented product!

Purchase Information

John Mitchell at Snapsis has been nice enough to provide a 25% discount to anyone that purchases CSS NavMenu using the coupon code "MITCH". You may click on the image below to navigate to purchase the product now!

Purchase CSS NavMenu now