jqueryクラシックアニメーションメニュー効果 code

jqueryクラシックアニメーションメニュー効果 code_jquery

WBOY

リリース： 2016-05-16 18:35:55

オリジナル

1117 人が閲覧しました

 
body 
{ 
font-size:12px; 
} 
.menuBox 
{ 
width:50%; 
高さ:自動; 
マージン:0 自動; 
} 
.menuBox ul 
{ 
margin:0px; 
パディング:0px; 
} 
.menuBox ul li 
{ 
float:left; 
表示:ブロック; 
幅:18%; 
高さ:30px; 
行の高さ:25px; 
リストスタイル:なし; 
マージン右:1px; 
} 
.menuBox ul li a 
{ 
display:block; 
幅:100%; 
高さ:100%; 
背景色:黒; 
色:白; 
テキスト装飾:なし; 
text-align:center; 
} 
.menuBox ul li a:hover 
{ 
display:block; 
幅:100%; 
高さ:100%; 
背景色:シルバー; 
色:赤; 
テキスト装飾:なし; 
} 
.menuSelected 
{ 
display:block; 
幅:100%; 
高さ:100%; 
背景色:シルバー; 
色:赤; 
テキスト装飾:なし; 
} 
.chideMenuForShow 
{ 
width:200px; 
位置:絶対; 
高さ:自動; 
ボーダー:1px ソリッド #ccc; 
float:right; 
背景色:シルバー; 
} 

HTML 代

复制代代以下:

menu1

menu1

menu1

menu1

menu1

menu1

menu1

menu1

menu1

menu1

menu1

menu2

menu3

メニュー 3

menu3

メニュー 3

menu4

menu5

JavaScript代码

复制代記入代码如下:

 
/* 
JavaScript のメニュー 
author:mr·zhong 
date:2010-01-25 
*/ 
/*現在のサブメニューが表示されるかどうかを決定します。 hidden* / 
var MenuShowOrHide = false; 
$(function(){ 
SetMenuID(); 
BindMenuHoverEval(); 
BindCideMenuHoverEval(); 
 /* 
メインおよびサブメニューのボタン ID を設定します 
*/ 
function SetMenuID(){ 
var id = 1; 
$('#ul_menu a').each(function() { 
$(this).attr("id","a_" id); 
var chideObj = $(this).next(); 
chideObj.attr("id","CideMenu_a_") id) ; 
chideObj.hide(); 
id 
}); 
/* 
メニューの色のスタイルを設定します
*/ 
関数menuID, isSelected){ 
if(isSelected) $("#" menuID).addClass("menuSelected"); 
else $("#" menuID).removeClass("menuSelected"); 
/* 
サブメニューの表示または非表示を設定します
*/ 
function ShowOrHideCideMenu(menuID,isShow){ 
var obj = $("#" menuID); isShow) 
{ 
obj.slideDown("slow"); 
} 
else obj.hide("slow"); 
/* 
メインをバインドしますメニュー マウス イベント 
*/ 
function BindMenuHoverEval(){ 
$("#ul_menu a").each(function(){ 
$(this).hover(function(){ 
ShowOrHideCideMenu( "CideMenu_" $(this).attr("id"),true); 
MenuShowOrHide = true; 
setTimeout('Hide(CideMenu_' $(this) ).attr ("id") ')',500); 
}) 
}); 
} 
/* 
サブメニュー マウス イベントをバインドします
*/ 
 function BindCideMenuHoverEval(){ 
$("#ul_menu .chideMenuForShow").each(function(){ 
$(this).hover(function(){ 
MenuShowOrHide = true; 
} , function(){ 
MenuShowOrHide = false; 
Hide($(this).attr("id")) 
}); * 
サブメニューを隠す
*/ 
function Hide(id){ 
if(!MenuShowOrHide) ShowOrHideCideMenu(id,false); 


ダウンロード アドレス:
http://www.jb51.net/jiaoben/24160.html