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?

See the example of the website menu below (or attached)

Jean-Marie Vaneskahian
jean@vaneskahian.com

Take a look here for instructions on a painless way to replace SolPart with DDR. You just edit two lines in your skin file: http://www.dnnsoftware.com/wiki/pag...user-guide

That should be a perfect replacement, and should not require any CSS changes.

If you want to create your own simple vertical menu, you can use the ULTokens template. That will render the menu as an unorderdered list (ul) that you can style any way that you see fit.

I have tried using using the DDRMenu with SolPart:

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

The problem seems to be that as of DNN 7.1 the child menus have broken. I have seen other people post about this problem. It would have been perfect, because as you say there would be no changes to the CSS.

So what can I use? Can you give me some guidance on this? I just need a simple vertical menu that shows child pages.

Here look at this site with Chrome or Firefox to see the old menu that I have (Using SolPart):

http://www.acocares.org

I just want to accomplish the same things with something that now works with DNN 7 (and I.E. 11)

I found this in one thread: "I struggled with this for two days before posting this request for help and then I found the solution less than an hour after posting. The solution was to go to host settings and check the box for hosted jquery and chose the previous jquery version. The sub menus open now."

You might want to try that, and specify a particular version of jquery for use. Of course, this might cause issues if an older jquery version breaks something that is newer.

At least the indication is that this is a jquery issue. It's also fixable, provided that someone knows how to fix it.

Not sure that this is related to the SolPart implementation, but

" you can easily make the vertical menu display again. Just add the following to the bottom of your css file:

#MenuV { display:block; }"

Thanks so much... I did not see that reply unit after I had re-coded my entire menu But at least I got it working here it what I did...

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" %>
<dnn:MENU ID="DDRMenuVerticalMenu" MenuStyle="DDRMenuVerticalMenu" runat="server">

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]

[/?]

[/>]
<script type="text/javascript"> <br /> var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas <br /> function initsidebarmenu(){ <br /> for (var x=0; x<menuids.length; x++){ <br /> var ultags=document.getElementById(menuids[x]).getElementsByTagName("ul") <br /> for (var t=0; t<ultags.length; t++){ <br /> ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle" <br /> if (ultags[t].parentNode.parentNode.id==menuids[x]) //if this is a first level submenu <br /> ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item <br /> else //else if this is a sub level submenu (ul) <br /> ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it <br /> ultags[t].parentNode.onmouseover=function(){ <br /> this.getElementsByTagName("ul")[0].style.display="block" <br /> } <br /> ultags[t].parentNode.onmouseout=function(){ <br /> this.getElementsByTagName("ul")[0].style.display="none" <br /> } <br /> } <br /> for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars <br /> ultags[t].style.visibility="visible" <br /> ultags[t].style.display="none" <br /> } <br /> } <br /> } <br /> if (window.addEventListener) <br /> window.addEventListener("load", initsidebarmenu, false) <br /> else if (window.attachEvent) <br /> window.attachEvent("onload", initsidebarmenu) <br /> </script> <br /> <br /> Next the contents of "menudef.xml": <br /> <br /> <?xml version="1.0" encoding="utf-8" ?> <br /> <manifest> <br /> <template>DDRMenuVerticalMenu.txt</template> <br /> </manifest> <br /> <br /> Finally you need the following in the "skin.css" file <br /> <br /> /* Start Menu */ <br /> <br /> .sidebarmenu ul{ <br /> <br /> margin: 0; <br /> <br /> padding: 0; <br /> <br /> list-style-type: none; <br /> <br /> font: bold 9px Verdana; <br /> <br /> width: 130px; /* Main Menu Item widths */ <br /> <br /> border-bottom: 1px solid #ccc; <br /> <br /> } <br /> <br /> .sidebarmenu ul li{ <br /> <br /> position: relative; <br /> <br /> } <br /> <br /> /* Top level menu links style */ <br /> <br /> .sidebarmenu ul li a{ <br /> <br /> display: block; <br /> <br /> overflow: auto; /*force hasLayout in IE7 */ <br /> <br /> color: white; <br /> <br /> text-decoration: none; <br /> <br /> padding: 6px; <br /> <br /> border-bottom: 1px solid #778; <br /> <br /> border-right: 1px solid #778; <br /> <br /> } <br /> <br /> .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{ <br /> <br /> background-color: #012D58; /*background of tabs (default state)*/ <br /> <br /> } <br /> <br /> .sidebarmenu ul li a:visited{ <br /> <br /> color: white; <br /> <br /> } <br /> <br /> .sidebarmenu ul li a:hover{ <br /> <br /> background-color: black; <br /> <br /> } <br /> <br /> /*Sub level menu items */ <br /> <br /> .sidebarmenu ul li ul{ <br /> <br /> position: absolute; <br /> <br /> width: 130px; /*Sub Menu Items width */ <br /> <br /> top: 0; <br /> <br /> visibility: hidden; <br /> <br /> } <br /> <br /> .sidebarmenu a.subfolderstyle{ <br /> <br /> background: url(Menu_Arrow.gif) no-repeat 97% 50%; <br /> <br /> } <br /> <br /> div.sidebarmenu li a.ActiveMenuItem { <br /> <br /> color: red; <br /> <br /> } <br /> <br /> /* Holly Hack for IE \*/ <br /> <br /> * html .sidebarmenu ul li { float: left; height: 1%; } <br /> <br /> * html .sidebarmenu ul li a { height: 1%; } <br /> <br /> /* End */ <br /> <br /> /* End Menu */

I'm glad that you got this done!