Dropdown menu

I'm developing a menu that has dropdown options on it. Basically on click, the menu pushes the page down to extend the submenu which is always partially open. The submenu could be a different height for each option.

At the moment I'm fixing the open and close height. The close height is fixed but the open height is variable and I'm struggling to find a solution that will just open to the required height. Of course I could select 1 dropdown, then another, so the menu would need to adjust its height accordingly.


And here's the code I have so far:

menu = {

    init: function () {

        menu.attachHandlers();
    },
    attachHandlers: function () {

        $('#uc-menu-nav').on('click', 'a.opener', displayMenu);

        function displayMenu(e) {

            pd(e);

            var $activeTab = $(this);
            var active = 'active';

            var $subnav = $('#uc-menu-subnav');
            var closedHeight = '19';
            var openHeight = '411';

            var $sections = $('#uc-menu .popup');
            var $activeSection = $($(this).data('section'));

            $activeTab
            .toggleClass(active)
            .siblings()
            .removeClass(active);

            if ($activeTab.hasClass(active)) {

                $subnav
                .stop()
                .animate({ height: openHeight }, 600);

                $sections.not($activeSection).hide();
                $activeSection.show();
            }
            else {

                $subnav
                .stop()
                .animate({ height: closedHeight }, 600)
                .queue(function (next) { $sections.hide(); next(); });
            }
        }
    }
};


Any help or advice very much appreciated.

• Topic Participants

• webbies

• alan

• suluap