+1-888-365-2779
Try Now
More in this section

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

Menu like the Resources menu on the Sitefinity.com site

5 posts, 1 answered
  1. Olivier
    Olivier avatar
    14 posts
    Registered:
    28 Sep 2012
    12 Jun 2012
    Link to this post
    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
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    12 Jun 2012
    Link to this post
    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
    Answered
  3. Olivier
    Olivier avatar
    14 posts
    Registered:
    28 Sep 2012
    12 Jun 2012
    Link to this post
    Thanks Steve.
    I will look into this - good point is that I will have to learn JScript, or at least understand it better.
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
  5. Olivier
    Olivier avatar
    14 posts
    Registered:
    28 Sep 2012
    12 Jun 2012
    Link to this post
    Great!  Thanks for the link - will surely be usefull.
5 posts, 1 answered