DotNetNuke Nav Menu Video Tutorials

We have created 22 video tutorials covering the DotNetNuke Nav Menu. The Nav Menu is the default menu that comes with DotNetNuke v4 and v5.

In Part 1 of the 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 videos cover:

• Video 1 - Introduction, Adding a Horizontal Nav Menu to a Skin
• Video 2 - An Overview of the Nav Menu Token Attributes
• Video 3 - Initial Background Styling and Positioning for the Menu
• Video 4 - How to Style the Root Menu Items
• Video 5 - Styling the Currently Selected, Mouse Over and Sub Menu Items
• Video 6 - Styling the Sub Menu
• Video 7 - How to Create a Vertical Menu Skin
• Video 8 - How to Style the Vertical Menu
• Video 9 - How to Display a Vertical and Horizontal Menu
• Video 10 - How to Configure the Display of 2 Nav Menus
• Video 11 - Configuring Which Pages to Display in the Vertical Menu

Following this, in part 2 of the tutorial we demonstrate how to style the Nav Menu v2 (for DotNetNuke v5 and above) 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, a menu that consists just of images and no text, a menu which consists of both images and text to create a rounded button menu.

The videos contain:

• Video 1 - Introduction and Setup
• Video 2 - How to Style the NavMenu using CSS Control Class
• Video 3 - How to Target and Style First and Last Menu Items and Sub Menus (MultiColored Menu)
• Video 4 - How to Style Single Menu Items using IDs and Specific Paths
• Video 5 - How to Style Menu Items in a Specific Path (Sub Menus)
• Video 6 - How to Create an Image Only Menu
• Video 7 - How to Create an Image Only Menu, Removing Text and Displaying Images
• Video 8 - How to Display the Admin and Host Menus in an Image Only Menu
• Video 9 - Styling the Sub Menu of a Root Image Only Menu
• Video 10 - How to Create a Button Menu (Using HTML Separators)
• Video 11 - Styling the HTML Separators for the Button Menu