Question

I just noticed https://www.bankofamerica.com/ and I really like the way their main navigation slides up and down smoothfully..

Can anybody tell me how to get a similar one? Is it a plugin or just some mixtures of “slideup”/”slidedown” jQuery?

Answer 1

jq Plugs -> http://speckyboy.com/2011/07/04/15-fresh-jquery-menu-plugins-and-tutorials/

Furthermore, there are MANY ways to do this, including through PURE CSS!

It’s really not hard at all, it’s all in what you prefer.

Also, here’s a couple pure css menu generators:

• http://www.cssmenumaker.com/
• http://css3menu.com/
• http://www.cssmenubuilder.com/home

Just FYI, the following is the custom jQuery Plugin BoA uses for their menu

(function($){
    $.fn.mainmenu=function(){
        var $powerMenu=$(this);
        var $lastMenuCloseListener=null;
        var isIE6=($.browser.msie&&$.browser.version.substr(0,1)<7);
        var config={sensitivity:1,interval:0,over:menuOnHandler,timeout:0,out:menuOffHandler};
        $("li",$(this)).data("hasFocus",false);$("li",$(this)).hoverIntent(config);
        $("li > a",$(this)).focus(function(event){
            if(event.keyCode==13) {
                var $liElement=$(this).parent();
                if(!$liElement.data("hasFocus")){
                    $liElement.trigger("liFocusInEvent");
                    $liElement.data("hasFocus",true);
                    if($liElement.find("div.submenu-last").length!=0){
                        handleLastSubmenuClose($liElement)
                    }
                }
            }
            else{
                $("li",$powerMenu).each(function(){
                    if($(this).data("hasFocus")&&($(this).get(0)!=$(this).parent().get(0))){
                        $(this).trigger("liFocusOutEvent")
                    }
                })
            }
        });
        addLastMenuCloseListener($("div.submenu-last:last",$powerMenu).closest("li"));
        $("li > a",$(this)).click(function(event){
            event.preventDefault();
            var $liElement=$(this).parent();
            if(!$liElement.data("hasFocus")){
                $liElement.trigger("liFocusInEvent");
                $liElement.data("hasFocus",true)}});
                $("li > a",$(this)).keydown(function(event){
                    if(event.shiftKey&&event.keyCode==9){
                        var $prevLIElement=$(this).parent().prev();
                        $(this).parent().trigger("liFocusOutEvent");
                        if($prevLIElement.length>0){
                            event.preventDefault();
                            $prevLIElement.children("a:first-child").focus()
                        }
                    }
                    else{
                        if(event.keyCode==9){
                            $(this).parent().trigger("liFocusOutEvent");
                            if($(this).parent().next().length>0){
                                event.preventDefault();
                                $(this).parent().next().children("a:first-child").focus()
                            }
                        }
                    }
                    if(event.keyCode==40){
                        ($(this).next().children("a:first-child").length!=0)?$(this).next().children("a:first-child").focus():$(this).next().children(".submenu-left").children("a:first-child").focus()
                    }
                });
                $("li",$(this)).bind("liFocusInEvent",menuOnHandler);
                $("li",$(this)).bind("liFocusOutEvent",menuOffHandler);
                $("div.submenu a, div.submenu-last a",$(this)).keydown(function(event){
                    if(event.keyCode==38){
                        var $prevItem=($(this).prev().length!=0)?$(this).prev():$(this).parent().prev().children("a:last-child");
                        if($prevItem.length!=0&&!$prevItem.is("div.dash-border")){
                            $prevItem.focus()
                        }
                        else{
                            if($prevItem.is("div.dash-border")){
                                $prevItem.prev().focus()
                            }
                        }
                    }
                    else{
                        if(event.keyCode==40){
                            var $nextItem=($(this).next("a, div.dash-border").length!=0)?$(this).next("a, div.dash-border"):$(this).parent().next().children("a:first-child");
                            if($nextItem.length!=0&&!$nextItem.is("div.dash-border")){
                                $nextItem.focus()
                            }
                            else{
                                if($nextItem.is("div.dash-border")){
                                    $nextItem.next().focus()}}}}});
                                    if(isIE6){
                                        $("li > div.submenu, li > div.submenu-last",$(this)).each(function(){
                                            if(!(($(this).width()%2)==0)){
                                                var submenu_width=$(this).width();
                                                submenu_width+=1;$(this).css({"width":submenu_width})
                                            }
                                            var submenu_bottom_width=$(this).width()-10;
                                            $(this).find("div.submenu-bottom").css({"width":submenu_bottom_width})
                                        })
                                    }
                                    function menuOnHandler(event){
                                        var $submenu=$(this).find("div.submenu,div.submenu-last");
                                        var $submenuLeft=$(this).find(".submenu-left");
                                        var $submenuRight=$(this).find(".submenu-right");
                                        $submenu.addClass("off-screen");
                                        var current_submenu_width=$submenuRight.length!=0?$submenuLeft.width()+$submenuRight.width()+40+6:
                                        $submenu.width();
                                        $submenu.removeClass("off-screen");
                                        $submenu.css({"visibility":"visible","display":"none","width":current_submenu_width}).slideDown("fast");
                                        $submenu.prev("a").addClass("select")
                                    }
                                    function menuOffHandler(){
                                        $(this).find("div.submenu,div.submenu-last").css({visibility:"hidden"});
                                        $(this).find("div.submenu,div.submenu-last").prev("a").removeClass("select");
                                        $(this).data("hasFocus",false)}
                                        function addLastMenuCloseListener($liElement){
                                            var $nextTabbable=findNextTabbable($liElement);if($nextTabbable!=null){
                                                $nextTabbable.focus(function(event){
                                                    $liElement.trigger("liFocusOutEvent")
                                                })
                                            }
                                        }
                                        function findNextTabbable($element){
                                            var $nextElement;
                                            var $nextTabbable;
                                            if($element.is("body")){
                                                return null
                                            }
                                            $nextElement=$element.next();
                                            if($nextElement.is(":tabbable")){
                                                return $nextElement
                                            }
                                            $nextTabbable=$element.next().find(":tabbable:first");
                                            if($nextElement.length==0){
                                                $nextTabbable=findNextTabbable($element.parent())
                                            }
                                            else{
                                                if($nextTabbable.length==0){
                                                    $nextTabbable=findNextTabbable($nextElement)
                                                }
                                            }
                                            return $nextTabbable
                                        }
    }
})(jQuery);