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
Video 3
- If you receive an error …
- Designing the HouseMenu using the skin.css file
- Setting up background gradient colour for the menu
- Viewing and removing indents / margins
- Formatting the links, removing bullets
- Hover over style
- Indenting sub menu items
- Problems with Internet Explorer
Time Length: 10min 9secs
Video 4
- Internet Explorer fixes
- Comparison of page file sizes between the Solpart menu and HouseMenu
Time Length: 4min 26secs
Download the HouseMenu