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

WBOY
リリース: 2016-05-16 18:35:55
オリジナル
1079 人が閲覧しました
复制代码代码如下:

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 代
复制代 代以下:




  • 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
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート