【发布时间】：2012-04-17 16:49:10
【问题描述】：
我刚刚注意到https://www.bankofamerica.com/，我真的很喜欢他们的主导航平滑上下滑动的方式..
谁能告诉我如何获得类似的？它是一个插件还是只是“slideup”/“slidedown” jQuery 的一些混合物？
【问题讨论】：
标签： jquery html navigation slide
【发布时间】：2012-04-17 16:49:10
【问题描述】：
jq 插头 -> http://speckyboy.com/2011/07/04/15-fresh-jquery-menu-plugins-and-tutorials/
此外，有很多方法可以做到这一点，包括通过 PURE CSS！
真的一点都不难，随心所欲。
另外，这里有几个纯 CSS 菜单生成器：
仅供参考，以下是 BoA 用于其菜单的自定义 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);
【讨论】：
-
你如何使用纯 CSS 让它在特定的时间向下/向上滑动？
-
你使用 css 动画，看这个w3schools.com/css3/css3_animations.asp
-
我花了一分钟才找到我的书签，但你可能真的很喜欢 this site 它为你创建了纯 css3 动画菜单，你所要做的就是填写数据，然后复制和粘贴
我相信美国银行正在使用 Drupal 和 Power Menu 模块。
正如 SpYk3HH 所说，有很多方法可以做到这一点。以下是其他一些要检查的内容：
【讨论】：