부드러운 슬라이드 탐색을 만드는 방법은 무엇입니까?

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 메뉴 발전기입니다 : 그냥 참고로

• 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

I Believe Bank of America는 Drupal 및 Power Menu 모듈을 사용하고 있습니다.

SpYk3HH가 말한 것처럼 이렇게하는 방법에는 여러 가지가 있습니다. 여기에 몇 가지 다른 체크 아웃입니다 :

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