円滑なスライドナビゲーションを作成するには？

Question

私はちょうどhttps://www.bankofamerica.com/に気づき、私は本当に彼らの主なナビゲーションはsmoothfully上下にスライドし、道のような..

誰もが似たものを取得する方法を教えてもらえますか？それはプラグインか "スライドアップ"/"スライダダウン" jQueryのいくつかの混合物ですか？

Answer 1

JQプラグ - >http://speckyboy.com/2011/07/04/15-fresh-jquery-menu-plugins-and-tutorials/

はさらに、これを行うには、多くの方法がPURE CSSを含め、あります！

これは本当に難しいことではありません。あなたが好むものはすべてです。

また

は、ここにカップル純粋なCSSメニュージェネレータです：、ちょうどFYI

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

カスタムのjQueryプラグインのBoA（ボア）が、彼らのメニューに使用され、次の

(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); 

Answer 2

私はBelieve Bank of AmericaがDrupalとPower Menuモジュールを使用しています。

SpYk3HHによると、これを行うには多くの方法があります。ここではいくつかの他の人がチェックアウトすることです：

• jQuery Drop Menu
• mbMenu
• Straight jQuery that you build out