Forum

I am moving a website from 4.3.5 to 7.3.2. One of the big problems I am having is that the old website uses a vertical menu based on the SolPart Menu. I need to create a similar menu with DNN 7.3.2.

I have looked into the DDRMenu but I cannot get it to work at all. Can anyone give me an example of a vertical menu under DNN 7.3.2 (regardless of Menu provider) that works across multiple browsers (SolPart Menu no longer works under IE 11).

I just need a simple example that I can use as a starting point for DNN 7.3.2.

The website that I am converting is at http://www.acocares.org (You will need some browser other than IE to see vertical menu work). How can I get this same menu functionality (and look) with DNN 7.3.2 and working with all browsers?

Jean-Marie Vaneskahian
jean@vaneskahian.com

Thanks so much... I was hoping that there was a way to use the built-in DNN Menu functions to get a vertical menu. When I used the integrated SolPart Menu there was VERY little CSS needed and all that I did was cut and paste into my skin CSS file. I am surprised this is so hard to achieve with DNN 7. It seems like a vertical menu would be a simple thing not requiring the purchase of a module.

If there is no other alternative, I guess that is what I will have to do.

Thanks again!

I finally figured out how to make a Vertical Menu for DNN 7 based on the DDRMenu. I had to create a new DDRMenu Template, and some new CSS entries. Not trivial at all, but it now works and replaces SolPart menu that stopped working (either original or SolPart under DDRMenu).

In Skin ASCX File

<%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>


Create a folder in Skin called "DDRMenuVerticalMenu". In that folder there will be two files: "DDRMenuVerticalMenu.txt" and "menudef.xml"

DDRMenuVerticalMenu.txt Contents


[>NODE]

[?ENABLED]
[=TEXT] [?NODE][/?]
[?ELSE]
[=TEXT] [?NODE][/?]
[/?]
[?NODE]

[*>NODE]

[/?]

[/>]


Next the contents of "menudef.xml":






Finally you need the following in the "skin.css" file

/* Start Menu */

.sidebarmenu ul{

margin: 0;

padding: 0;

list-style-type: none;

font: bold 9px Verdana;

width: 130px; /* Main Menu Item widths */

border-bottom: 1px solid #ccc;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

overflow: auto; /*force hasLayout in IE7 */

color: white;

text-decoration: none;

padding: 6px;

border-bottom: 1px solid #778;

border-right: 1px solid #778;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{

background-color: #012D58; /*background of tabs (default state)*/

}

.sidebarmenu ul li a:visited{

color: white;

}

.sidebarmenu ul li a:hover{

background-color: black;

}

/*Sub level menu items */

.sidebarmenu ul li ul{

position: absolute;

width: 130px; /*Sub Menu Items width */

top: 0;

visibility: hidden;

}

.sidebarmenu a.subfolderstyle{

background: url(Menu_Arrow.gif) no-repeat 97% 50%;

}

div.sidebarmenu li a.ActiveMenuItem {

color: red;

}

/* Holly Hack for IE \*/

* html .sidebarmenu ul li { float: left; height: 1%; }

* html .sidebarmenu ul li a { height: 1%; }

/* End */

/* End Menu */