如何製作平滑的滑動導航？

Question

我剛剛注意到了https://www.bankofamerica.com/，我真的很喜歡他們的主導航平滑地上下滑動。

有人可以告訴我如何獲得類似的嗎？它是一個插件還是隻是一些「滑動」/「滑動」jQuery的混合？

Answer 1

JQ插頭 - >http://speckyboy.com/2011/07/04/15-fresh-jquery-menu-plugins-and-tutorials/

此外，有很多種方法，通過純CSS要做到這一點，包括！

這真的不難，一切都在你喜歡的。

而且，這裏的一對夫婦純CSS菜單生成器：

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

僅供參考，以下是定製的jQuery插件寶兒使用他們的菜單

(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

我相信美國銀行正在使用Drupal和Power Menu模塊。

SpYk3HH說，有很多方法可以做到這一點。這裏的其他幾個人看看：

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