5. Styling the DDR Mega Menu

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.

This video contains:

• 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