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

复制代码代码如下:

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
  
  
  

  menu2

  
  

  menu2

  
  

  menu2

  
  

  menu2

  
  

  menu2

  
  

  menu2

  
  
  
  


• 
  menu3
  
  
  

  メニュー 3

  
  

  メニュー 3

  
  

  menu3

  
  

  menu3

  
  

  メニュー 3

  
  
  
  


• 
  menu4
  
  
  

  menu4

  
  

  menu4

  
  

  menu4

  
  

  menu4

  
  

  menu4

  
  

  menu4

  
  
  
  


• 
  menu5
  
  
  

  menu5

  
  

  menu5

  
  

  menu5

  
  

  menu5

  
  

  menu5

  
  

  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