Add any comments or questions regarding the DNN Garden - DDR Menu for DotNetNuke tutorial from Issue 62

I really LIKE the DDR Menu!  Additionally, Mark Allan is quite responsive to questions and suggestions.

The said, I really like the new MegaMenu on DotNetNuke.com.  It was done with Telerik's RAD menu, now available in all editions of DotNetNuke.

Great job with the tutorial! I do have one question:

How do I create columns for the Level 1 items? Using your example, my goal would be to have the Treeview Menu item, Superfish menu item, and the Mega Menu menu item in columns, all next to each other.  Their subitems would descend vertically beneath them.

Thanks for your help!

Adam

Hi,

Good job on the tutorials. I am using the Superfish DDR menu. I've been able to change colors - but I can't figure out how to get the drop-down width to be a higher value. It appears the drop-down width is approx 105px - and I'd like to double that.

Any ideas where I would make this change? I've had a look in the CSS files - so far no luck in determining where to make this change.

The exact answer will depend on the CSS Classes specified. Can you provide a link to the site? Alternatively, can you provide a copy of the code from your skin file that defines the menu?

Hi,

Here is a link:

http://dynamicsvrs.com/documentation.aspx

The only attribitutes I changed in the superfishmenu.css file were the colors. I'd like the drop-down to be twice as wide as it currently is. Do you know where this is set?

Thanks in advance!

I haven't been able to really did into the css for the Superfish menu, but ...

This is set up as a nested set of unordered lists, so the styling for the lists is the main thing that you need to look at.

I took at quick look at the superfish.css file. If you add a width attribute as shown here:



You will get the top and next level items to be the same width. You can experiment from there.

This may not be the best place to do the styling, but it will start you off.

Thanks - adding the width attribute to ".sf-menu li li" did indeed widen the drop-down.

Hi guys how do we create custom templates for ddrmenu I am trying to use the example css/js navigation @ http://www.dynamicdrive.com/style/c...line_menu/

Step 1 should be to upgrade to version 2 of the DDR menu. EVERYONE using the DDR menu should do this. It is a prerequisite before upgrading to DotNetNuke 6.0.

If you want to create a custom template that is close to something that already exists, I would recommend copying the entire template folder and pasting a renamed copy. Then do your modifications on the newly named copy. That way, you can always select the original.

It would also be a good idea to study existing templates to see how they work.

Mark has created documentation for V2 on the DotNetNuke.com wiki, and there is a link to it from the codeplex.com site. I believe that there is information there on creating templates. Basically, the menu produces an XML "file" that defines the menu and the code in the template converts the XML into the basic HTML that is the menu. On top of that are CSS for styling and javascript/jQuery for other behaviors and effects.

I learn to skin DNNMenu template with vertical orientation.

I learn how to do that, but with only one level visible, the other
levels are shown after mouse hover.

Is it posible to skin DNNMenu to get look similar to,
Left / top - "Pure CSS menu" on page:
http://www.dnn360.net/

If is posible can somebody give mi some hints?

Thanks

The "Accordian" template is quite close to what you want.

For a start, you'd need to change the hover behavior. Probably there are a few other items as well.

I'm afraid that I haven't used this or looked at the details, but it should be accessible. Start with the CSS, then take a look at the jQuery if that's not enough.

When I first used the Superfish menu for my website, everything worked fine. I modified some CSS attributes and I screwed it up. I went back and started over by copying and pasting the CSS from the DNNGarden website download file. I was able to get back to where I want and have the menu working about 95% on where I need it to be. However, this time around, the menu is appearing behind my other page content, not in front. It also appears to be partially transparent which I dont' want it to be. Any idea what I did wrong and why it's doing this now and not before?

Which version of DotNetNuke are you using? This sounds like the z-index issue present in early 6.x versions.

I'm using 6.1.3. I'm not familiar with this problem. How do I fix?

This is an issue with CSS files and specification of the z-index for certain classes.

You said that this was working fine until you edited a CSS file. When you "put things back" it is possible that you didn't quite get everything adjusted correctly.

I would start by making sure that the default.css file from 6.1.3 is installed. You can always copy if from the upgrade file.

Next, make sure that you also restored the CSS file for the Superfish menu. Again, copy the file from the distribution.

If that doesn't fix things, let me know.

How do I create a vertical ddr menu structure?

The best way to do this would be to use the ULTokens menu option.

You can then style the list elements to your liking. If you want to animate the menu, you can use some jQuery to do this.

As an example, you can use the jQuery Accordian. Take a look atIssue 78 - How to Implement jQuery UI Tabs in a DotNetNuke HTML Module. That wll shoy you how to use a jQuery plugin with an html structure. The ULTokens menu give you an html structure with which you can use one of a number of jQuery plugins with an appropriate html structure to build menus.

Note, the ULTokens menu produces nested ul structures with some classes. You may find it useful to modify the XSL file to simplify the use with jQuery.

Well I figured out how to make it vertical by this post here: http://www.dnngarden.com/Forum.T130...cope=posts

But now I have another problem. This menu seems sluggish - is there a way to speed it up somewhere in JavaScript?

Is the sluggishness the result of some timing in the javascript? Which template is you menu using?