By Lee Sykes
November 2010
In this tutorial we demonstrate how to use the DDR Menu by DNN Garden in your DotNetNuke skins.
The DDR Menu can be used in several ways, it can be simply dropped in as a direct upgrade replacement of the SolPart and DNN Nav Menus without having to recode all of your skin CSS.
The menu can use pre-built templates which provide a combination of jQuery and CSS menus. The DDR menu comes with a Treeview menu, Superfish menu, Accordion menu, Dropdown menu, Artisteer menu and a Mega-menu template.
It is also possible to build your own custom menu templates as well as add the menu to a page as a module or skin object.
The videos contain:
Video 1 - Introduction, Downloading, Installation and Skin Setup
- Introduction and module features
- How to download the module and associated templates
- DDR Menu module installation
- Explanation of automatic changes to the web.config file during installation
- Where to find the web.config backup file
- Navigating to your DotNetNuke installation files with Microsoft Visual Web Developer Express
- Locating and duplicating the Minimal Extropy skin files
Time Length: 9min 10secs
Video 2 - Adding the DDR Menu to a Skin and How to Change Animation Settings
- Editing a skin.ascx file to switch from the default DotNetNuke DNN Nav Menu to the DDR Menu
- Adding a ‘register’ line of code into the skin file
- How to change the menu provider name
- How to create a new page to test the edited skin
- How to configure the animated effects using custom attributes within your skin file
- Where to find more skinning tutorials
Time Length: 8min 07secs
Video 3 - Implementing the DDR Treeview Menu
- Creating a new skin to implement the DDR Treeview Menu
- Adding two new ‘register’ lines of code to your skin file to implement the treeview menu
- How to add the DDR menu Treeview control code into your skin file
- How and where to install the Treeview template into your DotNetNuke installation
- Demonstration of the 3 different places available to install DDR Menu templates
- Extracting and installing the Treeview template into the skin folder
- How to create a new page to test the Treeview DDR Menu
- Where to find the various animation options for Treeview
- Creating a new skin to implement the DDR Superfish Menu
Time Length: 9min 13secs
Video 4 - Implementing the DDR Superfish and Mega Menu
- Adding the register code for the Superfish menu
- How to add the DDR menu Superfish control code into your skin file
- Extracting and installing the Superfish Menu template into the skin folder
- Demonstration of the Superfish menu applied to a page
- Locating the superfish CSS file to edit the styling of the menu
- How to change the background color of the DDR Superfish menu items
- Installing a new simple skin for use with the DDR Mega Menu
- Adding the register code for the DDR menu
- How to add the DDR Mega Menu code into your skin file
- How to install the DDR Mega template into the DNN installation Desktop Modules folder
- Demonstration of the Mega menu applied to a page
- How to download and install the DNN Garden DDR Menu
Time Length: 11min 25secs
Video 5 - Styling the DDR Mega Menu
- How to style the DDR Mega Menu using CSS
- How to find out which CSS classes to use
- Setting the master link color for all root level and sub level menu items
- Adding a border, padding and setting the alignment of the root level menu items
- How to set the overall CSS style of the sub menu
- How to style the sub menu items
- Applying a background image to every sub menu item
- Changing the font size and style for each menu level
- How to change the size and background color of the surrounding div tag
Time Length: 10min 38secs
Video 6 - Styling the Mega Menu and Using the Menu Module
- How to style the sub-sub menu level and sub-sub menu items
- Demonstration of a basic styled DDR Mega Menu
- How to change the number of sub-sub level columns in the Mega Menu
- Locating and editing the menudef.xml file
- How to use the DDR Menu module in a DNN page
- Setting the DDR Menu style in the module settings
- Overview of other DDR Menu module settings
Time Length: 7min 05secs
Total Time Length: 55min 38secs
Comments