Menu like the Resources menu on the Sitefinity.com site - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 12-Jun-2012 00:00

Hi there.
We just installed SF5 and I am trying to find how to do a menu like the one for Resources on this site, but I can't find much information. I need to do at least 3 columns, of which only the first one would be dynamic (i.e. following the site map) and the last one would have images like the Resources menu above.
Could someone explain how this is done? Which controls are used (like a panel inside a menu, or vice-versa, or anything else)?
Is it done through the user controls, or is it just using Widgets?
Any help would be appreciated.
Thanks!
Olivier

Posted by Community Admin on 12-Jun-2012 00:00

Appears to be a custom implementation, use firefox+firebug to inspect it.

So you'd have to make your own usercontrol and somehow render out the menu items dynamically, then use jQuery to add in all the click\animation events.

Here's the click event for the resources menu item above

$("#menu .menu-link.has-sub").click(function ()

if (!$(this).next().hasClass("show-sub"))

$(".sub-menu").removeClass("show-sub");

$(".menu-link").removeClass("menu-opened");

$("body").bind("click", hideSubMenuOfTopNav);

else

$("body").unbind('click');

$(this).next().toggleClass("show-sub");

$(this).toggleClass("menu-opened");

);

What might be neat though is if on your main template you had a hidden div that had all your custom menu elements\styling, then on $(document).ready you just appended that into the proper menu node, perhaps add a wrapper class or something to help with the styling. I'm just saying doing it that way would let you have more design control of what the item will render, rather than doing it with a jQuery template or large string.

Steve

Posted by Community Admin on 12-Jun-2012 00:00

Thanks Steve.
I will look into this - good point is that I will have to learn JScript, or at least understand it better.

Posted by Community Admin on 12-Jun-2012 00:00

Learn to love it :)

Posted by Community Admin on 12-Jun-2012 00:00

Great! Thanks for the link - will surely be usefull.

This thread is closed