By Lee Sykes
August 2009
In this tutorial we demonstrate the DotNetNuke NavMenu. The NavMenu is the default menu that comes with DotNetNuke and is available in DotNetNuke versions 4 and 5.
In this tutorial we demonstrate how to configure and setup the NavMenu in your DotNetNuke skins. We demonstrate how to create a horizontal menu, vertical menu and both a horizontal and vertical menu on the same page.
The NavMenu in Version 5 of DotNetNuke has introduced some additional features, but for the purposes of this tutorial we cover the features that are available in both DotNetNuke versions 4 and 5.
To begin the tutorial we demonstrate how to create a basic 1pane simple skin and add the NavMenu to your skin. The first menu we create is a horizontal menu, we show you how to add a background faded image to the menu, how to set the styling for hover over, the breadcrumb trail styling for the menu, (ie. the currently selected page) and how to work with the various attributes that are available for the NavMenu.
Following this we create a vertical menu and then demonstrate how to display both a vertical and horizontal menu on the same page. To finish we show you the attributes that are available for configuring which menu items should display when two menus are presented on a page.
This tutorial demonstrates working with the NavMenu using the ascx skinning method. If you are new to the ascx method of skinning, please view this tutorial first:
DotNetNuke ASCX Skinning for Professional Skinners
It is also recommended you view this tutorial:
Troubleshooting DotNetNuke Skins Using the Web Developer Toolbar
The videos cover:
Video 1 - Introduction, Adding a Horizontal Nav Menu to a Skin
- Introduction
- Visual Web Developer Express, opening the skinning folder
- The simple onepane.ascx skin
- Explanation of the skin layout code
- Skin.css file explanation of the layout code
- How to apply the skin to a page
- How to add the Nav Menu to a skin.ascx file
- How to add the Nav menu token and attributes
- How to add the Register code for the Nav menu
Time Length: 9min 40secs
Video 2 - An Overview of the Nav Menu Token Attributes
- The Nav Menu token code, the attributes
- runat, ID, ProviderName
- The attributes available for the DNN Menu Nav Provider
- IndicateChildren, ControlOrientation, CSSNodeRoot, CSSNodeHoverRoot
- CSSNodeSelectedRoot, CSSBreadCrumbRoot, CSSContainerSub, CSSNodeHoverSub, CSSNodeSelectedSub, CSSContainerRoot, CSSControl, CSSBreak
- How to create a onepane.css file
Time Length: 7min 24secs
Video 3 - Initial Background Styling and Positioning for the Menu
- How to style the menu div tag using the one_pane.css file
- How to set the background color and image of the menu
- Menu font styling and menu height
- How to position the menu
Time Length: 7min 29secs
Video 4 - How to Style the Root Menu Items
- CSSNodeRoot
- How to style the Root Menu Items
- How to add a border and padding between each menu item
- How to use the Web Developers Toolbar
- Using Floats
- CSSNodeSelectedRoot
- How to style the currently selected root menu item
- How to add a border and padding for the currently selected root menu item
- How to align the menu text to center
Time Length: 8min 46secs
Video 5 - Styling the Currently Selected, Mouse Over and Sub Menu Items
- How to style the currently selected root menu item
- How to display a background image for the currently selected root menu item
- CSSNodeHoverRoot
- How to style Mouse Hover Over of a root menu item
- How to display a background image for the Mouse Hover Over of a root menu item
- CSSContainerSub
- How to style sub menus
Time Length: 8min 50secs
Video 6 - Styling the Sub Menu
- How to add a border around the submenu container
- CSSNodeHoverSub
- How to style the submenu items mouse hover over
- CSSNodeSelectedSub
- How to style the currently selected submenu item
Time Length: 7min 53secs
Video 7 - How to Create a Vertical Menu Skin
- How to create a Vertical Nav Menu
- How to create the Vertical Nav Menu skin files
- How to edit the skin.ascx file
- How to set the Nav Menu token Vertical attribute
- How to check the CSS for displaying the menu vertically
- How to change the layout of the skin for a vertical menu
Time Length: 10min 24secs
Video 8 - How to Style the Vertical Menu
- How to style the vertical menu
- How to style the background of the vertical menu
- How to align the top of the menu and add spacing
- How to align the text in the vertical menu and remove the border
Time Length: 6min 8secs
Video 9 - How to Display a Vertical and Horizontal Menu
- How to create the skin files for 2 Nav Menus
- How to set the attributes for the Vertical Nav Menu token
- How to create unique CSS classes for the Vertical menu
- How to add the code for the horizontal Nav Menu token into the skin.ascx file
Time Length: 9min 19secs
Video 10 - How to Configure the Display of 2 Nav Menus
- How to set the attributes for the Horizontal Nav Menu token
- How to create unique CSS classes for the Horizontal menu
- How to set the Menu Level (which menu items to display)
- Root level for the Vertical Menu
- Same level for the Vertical Menu
Time Length: 9min 11secs
Video 11 - Configuring Which Pages to Display in the Vertical Menu
- How to set the Menu Level (which menu items to display)
- Parent level for the Vertical Menu
- Child level for the Vertical Menu
- Indicate Children
- StartTabId
Time Length: 9min 40secs
Total Time Length: 94min 44secs
Comments