Great tutorial. Any advice/pitfalls if we want to use the megamenu instead of the superfish menu?

Would you recommend making a copy of the DK skin and modifying it, or using the DNN Creative tutorial and adding the megamenu?

Attached is the menu I'm trying to recreate.

Thanks for any advice,
Dan

Dan,

I don't see an attachment, so I can't comment on that.

As for MegaMenu or Superfish, I think that is a matter of design and taste. Which to you want to use for the site? Also, don't forget that you can copy and modify either of these templates to your exact taste.

I always recommend that "copy and modify" is the best approach. That leaves the original untouched, and you can return to it any time you like.

Still trying to get my head around adding images to these posts. Second try.

The third time will be the charm!

So what was the question? I'd use the Mega Menu. You should be able to adjust the styling to match the image.

That was the question. Does mega support 1 row with 4 columns and another row with 3 columns for the drop down? how about using an icon for the homepage link? Is there a good resource you can recommend for editing the megamenu?

Thanks,
Dan

PS. managed to get the SalesForce hookup working on the first try. Dynamic Forms tutorial worked like advertised.

There is also this pure css menu that might be an option:
http://net.tutsplus.com/tutorials/h...down-menu/

Just looking to see what your recommendation would be for the least amount of work.

If nothing else, that seems to be a very nice tutorial.

Now ... if you use the Mega menu a lot of the work is done for you, including getting all of the links in the right place.

I'd probably stick with the Mega Menu. It's been a couple of years since I've seriously styled it, but it was relatively easy to understand and modify when I did work with it. For a nice example of a use of the Mega Menu with DotNetNuke, look at http://energy.usgs.gov/.

When I add megamenu to my skin, I just see a long ordered list instead of the menu. I have the megamenu folder, next to the superfish menu folder in my skin. And I changed the menu reference in my ascx file <dnn:MENU MenuStyle="DNNMega" runat="server" />

What am I missing?

Thanks,
Dan

It sounds like you are missing at least the CSS file. My test site's folder also is named Mega2DNN. Are you using the most recent version?

I have 2 .js files, .css, .xml and .xslt.

Same, + an images folder. My folder is called DNNMega

and if I apply DK skin, it works fine. Curious.

Are you using a custom skin? If so, make sure that it's loading jQuery and jQueryUI.

It is a custom skin. Does the jQuery and jQueryUI need to be a link in the ascx file, or is it a site setting?

ahh, I see the links at the bottom of the ascx file:
nnJsInclude runat="server" FilePath="jquery.cycle.min.js" PathNameAlias="SkinPath" />
nnJsInclude runat="server" FilePath="DNNMega/jquery.dnnmega.debug.js" PathNameAlias="SkinPath" />
nnCssInclude runat="server" FilePath="DNNMega/dnnmega.css" PathNameAlias="SkinPath" />
nnJsInclude runat="server" FilePath="~/Resources/Shared/Scripts/jquery/jquery.hoverIntent.min.js" />

I included them but am getting this message now:
Could Not Load Skin: /Portals/_default/Skins/PSDTutorial2/Home.ascx, Error: Unknown server tag 'dnnnnJsInclude'.

Never mind, got it. Just needed to include all of the <%@ Register lines from the Dark Night skin.
Now on to my favorite part, editing css!

Thanks for your help,

Great!

D you know if its possible to use an image for the home page button instead of the text "home"? Or what that require using all images for the menu in a custom css menu?

Thanks,
Dan

I haven't thought about that, but ...

1. You could modify the menu's file to render the icon instead of the page name if the page is the home page.

2. You could use a jQuery function to change the HTML from text to an image for the home page.

Which do option do you think would be the easier option for someone of my programming abilities, limited as they are.

Which menu template will you be using?

Mega2DNN

I suspect that you can do this.

This is really a sketch, but I think reasonable.

All of the setup is done in Mega2DNN.xslt. You'll have to learn to guess enough xslt to figure out what to do.

Start with the part . This is the part that processes all of the top level nodes. This basically creates an tag with the page's URL and text that is the page. You will want to test for the page name being home. Then instead of that, insert the image tag for icon or largeicon in place of the name.

You will probably want to look at what is output in the page source and also use the DumpXML template to grab a copy of the input to the xslt.

See this: http://www.dotnetnuke.com/Resources...lates.aspx

Thanks Joe,
I'll give it a try.

I also found a good intro tutorial from Armand Datema for editing the menu xslt document for dnn here:
http://www.dnnhero.com/Listing/tabi...atema.aspx

Thanks again,
Dan

Yes, the links to Armand's articles are at the bottom of that Wiki page, too.

(BTW, Armand is one of the really good guys in this community. I had the opportunity to meet him at the first DNN World meeting.)

Still reading up on the xslt, but I have a different issue that has come up while building out the megamenu.

I have Will Stroll's content slider on a pane. The mega menu dropdown is getting hidden behind the slides.

Do I need to add a clear style somewhere to keep this from happening? I (hopefully) have attached an image of this.

Thanks,
Dan

Possibly. Try adding this to either skin.css or portal.css:

.dnnModule{z-index:0}

(Double check default.css to make sure that I got the capitalization of dnnModule right)

No joy.
I added .DnnModule{z-index:0} to both portal and skin css. The caps match the style in the default.css
I also added z-index:0 to the mega2dnn css but that also made no difference.

I checked on a few different pages and the dropdown menu is being overlapped on these pages as well, so it's not an individual module issue.

Same problem in Chrome and FF.

Got it. Had to add z-index:1000; to the megamenu css .ul.megamenu style.

Related question to the last image. If a user mouses over a link that has a dropdown, and then moves the mouse over the dropdown, is there a way to set the color of link that triggered the dropdown (not the current link)? In the image, since the bgcolor is white as well as the standard font color of the link, the link disappears (white on white). Is is possible to change this setting?

Thanks,
Dan

There is an @breadcrumb that is true for pages is in the current breadcrumb. You could modify the xslt to add a Breadcrumb class to items in the breadcrumb, and create a style that changes the color of the links.

Thanks Joe,
Time for me to read up on xslt. I'm going to close out this thread and start a new one specific to the issue I'm working on.
Thanks again,
Dan