By Lee Sykes
August 2006
In this tutorial we demonstrate how to create 3 horizontal CSS menus using the HouseMenu created by Tim Rolands from the House of Nuke.
We walk you through step by step covering editing the
free Simple Red Leaf CSS skin and converting it to use horizontal menus. All of the skin code is available for download with the videos.
The menus
We explain how to create a:
Single horizontal menu that just displays the root items of the menu
Horizontal menu with a sub menu
Horizontal menu that uses images for the buttons with a sub menu
Pros and Cons
There are many advantages to using the HouseMenu, if you are new to the HouseMenu, follow this tutorial first:
How to install and configure the House of Nuke menu for a DotNetNuke skin to read the pros and cons and understand the basics for configuring the menu.
DotNetNuke Tutorial
In these 7 video tutorials (65 mins) we walk you through, step by step, how to integrate horizontal CSS menus with DotNetNuke skins.
Introduction Video
The videos cover:
Video 1 - Introduction and demonstration
- Introduction to the three menus
- Download the CSS Menu
- Watch the videos from How to create a pure CSS skin to understand the basics of working with the HouseMenu
Time Length: 3min 45secs
Video 2 - Creating the layout initial configuration for a horizontal CSS menu
- Downloading the skin & structuring the files
- Opening in Visual Web Developer Express
- Introduction to the root CSS menu
- Editing the layout of the simple red leaf skin to accommodate a horizontal menu instead of a vertical menu
- Configuring the HouseMenu in the skin.xml file
- Styling the mainmenu class in the skin.css file
- Styling the Horizontal HouseMenu
- Demonstration of styling on a live website
- Explanation of the Web Developers Toolbar for the Firefox browser
- Initial styling of the HouseMenu
- Setting the font for the menu
- Removing border, margin, bullets
- Example of display inline option for creating a horizontal menu, and the display problems that can occur in browsers
Time Length: 10min 27secs
Video 3 - Styling the horizontal root menu
- Working with the float property to display horizontal menus
- How to implement floats and ensure that background colors and images still display
- Styling the menu links to appear as buttons
- Styling the hover over menu links buttons
- Copying the code from the Web Developers Toolbar to the skin.css file
- Editing the iehacks.css file - removing IE hacks as they are no longer needed
- Viewing the completed menu
- Problem with Admin and Host menus
- Solution to Admin and Host Menus
Time Length: 9min 56secs
Video 4 - Configuring the horizontal sub menu
- Introduction to horizontal sub menu
- Copying files and opening as a website in VWD
- Creating the sub menu
- Setting the layout of the menu
- How to add several HouseMenu skin objects to a skin
- Configuring the submenu in the skin.xml file
- Explanation of scope and how the submenu system works
- Adding the TabID to the scope in the skin.xml file
- Setting the positioning of the submenu in the skin.css file
Time Length: 8min 40secs
Video 5 - Styling the sub-menu and setting up for all root menu items
- Styling the submenu using the skin.css file
- Viewing the submenu
- Creating a submenu and skin for the announcements page
- Creating submenus and skins for the documents, events and skin details pages
Time Length: 11min 8secs
Video 6 - Pros and Cons, Creating a submenu using images to create a button effect
- Demonstration of all submenus completed
- Pros and Cons of configuring the menus in this format
- Further possibilities with sub-sub menus (3 HouseMenus on one page)
- Introduction to creating a menu with images
- Setting up the files and opening in VWD
- Adding the button images (viewing)
- Editing the skin live with the web developers toolbar
- Styling the background and adjusting the height of the menu
- Positioning the menu
- Adding a button background image and color to the root menu items for the main menu
Time Length: 11min 16secs
Video 7 - Styling the image menu
- Viewing the background image
- Explanation of different menu styling structure to enable the current page to be highlighted in the menu
- Removing previous button styling to allow the new background image to display
- Setting the background color for the sub-menu
- Adding borders to the root and submenu to create the button effect
- Viewing the menu
- Setting an image to use for the hover over of the menu
- Setting an image to use for the current selected page in the menu
- Viewing the final menu design
Time Length: 9min 35secs
Total Time Length: 64min 47secs
Tutorial Information
We recommend that you watch these tutorials first:
How to install and configure the House of Nuke menu for a DotNetNuke skin
How to create a pure CSS skin in DotNetNuke
Free Simple Red Leaf CSS Skin
Download the HouseMenu PA for free