Learn DNN / DotNetNuke

How to install and configure the House of Nuke menu for a DotNetNuke® skin

By Lee Sykes

March 2006

In this tutorial we are going to look at the HouseMenu created by Tim Rolands from the House of Nuke.

You can see an example of the HouseMenu in action on this DotNetNuke Skin.

Introduction to the HouseMenu

The HouseMenu is a free CSS based menu and can be used to replace the standard Solpart menu that comes with DotNetNuke.

The HouseMenu displays the menu links as a standard HTML unordered list. You can configure the HouseMenu to display all site pages, children of the current page or children of any specified page. You can also choose whether or not to include hidden pages, admin pages, host pages, etc.

The HouseMenu also has the option for horizontal / vertical layouts and for static or dynamic display. Static display lists all of the menu items (including the sub-menus) within the menu box. Whereas a dynamic display works in the same way as the Solpart menu, simply hover over the main menu items and the sub-menus appear.

The HouseMenu comes in two versions. The first is a module which you can insert into any page and configure through the module settings. The second is a Skin Object, which allows you to add the menu directly into your skin design and completely remove the Solpart menu.

The HouseMenu module comes with several example configurations for you to experiment with and the HouseMenu skin object comes with an example skin and styles for you to experiment and learn from.

In this tutorial we are going to explore the Skin Object version of the HouseMenu.

Using the HouseMenu instead of the Solpart menu can offer several benefits:

The HouseMenu reduces the overall page size

If you follow the video tutorials, you will see that from two identical pages, the HouseMenu has a page size of 20.92kb and the SolpartMenu has a page size of 32.27Kb – that’s a saving of 11.35Kb. This is quite a large file size difference and will make a big difference to any visitors who have a slow internet connection. It will also have the added benefit of saving bandwidth and hosting costs for your website.

Search Engine Friendly

Because the HouseMenu renders the menu as an unordered list of links, the search engines will be able to easily follow these links and index all of the pages from your website.

Design

It’s easy to design a menu in CSS, there are several tutorials across the internet for creating a CSS menu, all you have to do is adapt it for DotNetNuke.

Free

The HouseMenu is available for free. If you wish to obtain the source code, this is available for purchase through Snowcovered.

Issues:

The HouseMenu does come with some issues that you need to be aware of.

Because the menu is a CSS based menu, you need to check the display of the menu in a variety of browsers. This tutorial explains how to check your skins for compatibility with browsers and provides a list of the browsers to download.

You may need to implement CSS hacks to ensure that the menu displays correctly across all browsers. A good site for keeping track of various CSS hacks is Position is Everything.

Having said this, you should find that the HouseMenu is more backward compatible than the Solpart menu. – If for instance you view the Solpart menu with IE5, the menu disappears, whereas with the HouseMenu the menu still appears.

I found the most compatible setting within the HouseMenu was to use the static version. The HouseMenu comes with a skin using a horizontal dynamic example, but when I tried to create a vertical dynamic menu, I could not get a consistent display across the various browsers. I suspect I need to do a little more experimenting, but as a recommendation to beginners, I would develop static based menus as your first project.

Video Tutorials - part 8

The video tutorials below continue our series on How to build a DotNetNuke website.
(All of the skin files are included with the video downloads)

We edit the Vortex Music skin and demonstrate how to install, setup and configure the HouseMenu.

The Vortex Music skin using the HouseMenu

Video 1

Demonstration of the HouseMenu and downloading the menu
Installing the skin Object to DotNetNuke
Preparations: Copying the files, opening the website in Visual Web Developer

Time Length: 5min 16secs

Video 2

Adding the HouseMenu Token
Editing the xml file
(deleting the solpart menu, adding the HouseMenu and configuration)
Installing & viewing Housemenu in a skin

Time Length: 5min 24secs