Multicolumn drop down Menu is a very good option to use in any web site. This way our site can get a great looking and functioning menu structure. This megamenu structure is very difficult to attain when it comes to Dynamilcally adding it to DotNetNuke default menu structure. This menu system i am going to share works in DNN vs 5.0.1 and above. This tip requires an external module managed by Brandon Haynes of DotNetNuke Corporation.
Following are the steps you need to follow. 1. Download DotNetNuke Templated (Mega-)Menu Navigation Provider from the following link (http://dnntemplatedmenu.codeplex.com/). 2. Install the module downloaded into your host extensions module of your website.
3. After installing the module you need to decide in which specific root menu node you need to use the following template and achieve the following structure.
There are two structures available to attain the following structure for your menu system follow the steps below;
On Expanding the Root1 menu we will see somewhat like this effect.
1nd menu structure available is ROOT1 ROOT2 ROOT3 ROOT4 Submenu 1 Submenu 2 Submenu 3 submenu 1.1 submenu 2.1 submenu 3.1 submenu 1.2 submenu 2.2 submenu 3.2 submenu 1.3 submenu 2.3 submenu 3.3
submenu 1.4 submenu 2.4 submenu 3.4
1. After deciding that go to the Page Settings of the root menu you wish to change like in this example shown above it is ROOT1.
2. In the page settings expand the Advanced tag and in the Page Header’s tag enter the following string:
3. To make edit’s in the css properties make changes in the wide.css file which would be available at the folllowing location
on your website install “~\Providers\NavigationProviders\TemplatedDNNMenuNavigationProvider”
2nd menu structure available is ROOT1 ROOT2 ROOT3 ROOT4 Submenu 1 submenu 1.1 submenu 1.2 submenu 1.3
submenu 1.4 submenu 1.5 submenu 1.6
Submenu 2 submenu 2.1 submenu 2.2 submenu 2.3
submenu 2.4 submenu 2.5
Submenu 3
submenu 3.1 submenu 3.2 submenu 3.3
1. After deciding that go to the Page Settings of the root menu you wish to change like in this example shown above it is ROOT1.
2. In the page settings expand the Advanced tag and in the Page Header’s tag enter the following string:
3. To make edit’s in the css properties make changes in the default.css file which would be available at the folllowing location
on your website install “~\Providers\NavigationProviders\TemplatedDNNMenuNavigationProvider”