By Lee Sykes
January 2010
In this tutorial we demonstrate working with the Nav Menu v2 which comes with DotNetNuke v5. This tutorial will continue from the previous Nav Menu tutorial which covered techniques that work in both DotNetNuke v4 and v5. The techniques outlined in this tutorial however will only work with DotNetNuke v5 and higher.
In this tutorial we demonstrate how to style the Nav Menu v2 using the new CSS control features, this allows you to specify styling elements such as styling the first and last items in a menu, all sub menus, or even the id of a menu item. This can be used to develop very stylized menus and in this example we demonstrate all of these CSS options by creating a multicolored menu.
Following the multicolored menu we show you how to create a menu that consists just of images and no text. We show you how to remove the text from the root menu items and how to replace each root menu item with a different image. Quite often we receive requests for image only menus, so this should help you to design one using the NavMenu.
To finish, we show you how to create a menu which consists of both images and text to create a rounded button menu. We create this by using the HTML Separator feature in the NavMenu. This menu displays the page name within each button and each rounded button stretches its width depending on the width of the menu item text.
The new CSS features in the NavMenu make it much simpler to style and create a menu and we would recommend you use these CSS techniques when creating your own NavMenu.
Before continuing with this tutorial please make sure you watch this tutorial first
DotNetNuke Nav Menu as we are going to assume that you understand all of the concepts introduced in that tutorial.
The videos contain:
Video 1 - Introduction and Setup
- Introduction to NavMenu V2 and the various menu types
- Download and install the NavMenu skin code
- How to open the DotNetNuke installation in Visual Web Developer Express 2008
- How to navigate to the skin folder
- How to create the horizontal CSS Nav menu skin files
- A recap of the code in the skin.ascx file
- The NavMenu token properties
- CSSControl Namespace class for styling the NavMenu v2
Time Length: 9min 30secs
Video 2 - How to Style the NavMenu using CSS Control Class
- Editing the skin.css file
- Introduction to the CSS code
- #Menu for background and positioning
- How to specify the correct CSS classes for the NavMenu v2
- How to style the root menu items
- How to style the hover over root menu items
- How to style the currently selected page in the root menu
- How to style the submenu, submenu hover and submenu selected page
Time Length: 8min 12secs
Video 3 - How to Target and Style First and Last Menu Items and Sub Menus (MultiColored Menu)
- Viewing the skin
- How to target menu items, demonstration of a multicolor menu
- How to style the first root menu and submenu items
- How to style the last root menu and submenu items
- How to style a single submenu
- How to find the id of the admin menu using the web developer toolbar
Time Length: 7min 41secs
Video 4 - How to Style Single Menu Items using IDs and Specific Paths
- How to target a sub menu with id
- How to style the admin sub menu
- How to target and style using the id of a single menu item
- How to find the id of a page
- How to target menu items in a specific path (for when you do not know the ids)
- How to style the root first menu item, root second menu item, root forth menu item
Time Length: 9min 29secs
Video 5 - How to Style Menu Items in a Specific Path (Sub Menus)
- How to style the root second menu item, first child (sub menu)
- Root second menu item, second child (sub menu)
- Root second menu item, third child (sub menu)
- Root second menu item, first child, child (sub sub menu)
Time Length: 7min 5secs
Video 6 - How to Create an Image Only Menu
- Creating the new skin files for the image only menu
- How to import the images for the menu
- #menu, setting the default styles, background and positioning
- Configuring the root menu styles
Time Length: 8min 8secs
Video 7 - How to Create an Image Only Menu, Removing Text and Displaying Images
- Adding borders around the #menu and root menu items for troubleshooting
- Viewing the menu
- How to remove the text from the root menu items
- How to display an image for the Root first menu item (specific path)
- Previewing the first image in the menu
- How to set the hover over image for the Root first menu item
- How to display an image for the Root second, third, forth and fifth menu items
Time Length: 10min 55secs
Video 8 - How to Display the Admin and Host Menus in an Image Only Menu
- How to space out the images using padding
- How to enable the text for the admin and host menus
- Identifying the Admin and Host menu ids
- Overriding the display:none for all root menu items
- Styling the admin and host menus
Time Length: 7min 47secs
Video 9 - Styling the Sub Menu of a Root Image Only Menu
- Removing the troubleshooting borders
- How to style the sub menu for an image only menu
- How to style the hover over for the sub menu
- How to add a gap between the root menu and sub menu
Time Length: 7min 6secs
Video 10 - How to Create a Button Menu (Using HTML Separators)
- How to create the skin files for the Button Menu
- How to import the images into the skin files
- An explanation of the HTML Separators
- How to add the Separator Left and Right HTML code into the skin.ascx file
- Configuring the skin.css file
- #menu, setting up the default font and menu positioning
- Styling the root menu items
Time Length: 8min 53secs
Video 11 - Styling the HTML Separators for the Button Menu
- How to style the left and right separator
- How to display the left and right side images
- Using padding to view the images
- Using the text class to style the menu text
- How to ensure the images are displayed inside the root menu borders
- How to style the text to fill the gap between the two images
- Styling the hover over for the menu text
- How to add a gap between the root menu and sub menu
- Checking long text in the menu and the button stretches
Time Length: 11min 58secs
Total Time Length: 96min 44secs
Comments