Web’Notes

jQueryで作る開閉式のメニュー

Brunch Menu By: Basheer Tome

jQueryで何かするときは、自作するよりやりたい処理を実装しているプラグインを探すことの方が多いと思います。

メニューも「メニュー jQuery」で検索すればプラグインが多くヒットしますが、自分んで組んでおいた方が後々メンテや少しメニューをいじる必要があるときなどに役立ちます。

DEMO

1. 開閉式メニューのデモ
2. HTML & CSSのソースコード
3. jQueryのソースコード

開閉式メニューのデモ

HTML & CSSのソースコード

まず最初に、HTMLとCSSでこのように動きのないメニューを作成します。

Please click.

新規作成

開く

リンク1を開くリンク2を開くリンク3を開く

保存名前を付けて保存

HTMLは単純にdivタグを入れ子にし、2段のメニューを作成しています。

一番上の「Please click」と中段の「開く」は、メニューの開閉用にdivタグを使用し、その他はリンク用にaタグで作成します。

divとaタグ内のspanタグは文字を中央揃えにするため入れています。

 <div id="mainmenu"><span>Please click.</span>
    <img id="mainmenu-img" src="./ArrowUp.png" /></div>
    <div id="menuitem">
        <a href="#"><span>新規作成</span></a>
            <div>
                <span>開く</span>
                <img id="menuitem-img" src="./ArrowRight.gif" />
                <div class="submenu">
                    <a href="#"><span>リンク1を開く</span></a>
                    <a href="#"><span>リンク2を開く</span></a>
                    <a href="#"><span>リンク3を開く</span></a>
                </div>
            </div>
    <a href="#"><span>保存</span></a>
    <a href="#"><span>名前を付けて保存</span></a>
</div>

/* html,bodyタグの設定 */
/* 全体のクリア*/
html, body{
    margin: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    width:100%;
    height:100%;
}

/* divタグとaタグのボックス化(1段目のメニュー) */
#mainmenu, #menuitem > div, #menuitem > a, .submenu > a{
    width: 150px;
    height: 30px;
    display: block;
    margin:1px 0px 0px 0px; 
    padding: 2px 2px 2px 10px;
    font-weight: bold;
    background-color:#0076ff;   
    color:white;
    position: relative;     /* 文字の中央ぞろえ用 + 2段目のメニューの位置調整用 */
}
/* 2段目のメニュー */
.submenu{
    position: absolute;
    top:-2px;       /* 1段目のメニューのpadding:2 */
    left: 162px;    /* 1段目のメニューのwidth:150 + padding:10 + 2 */
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
}
/* 画像の位置調整用 */
#mainmenu img, #menuitem div img{
    position: absolute;
    top: 10px;
    right: 10px
}
/* 文字の中央ぞろえ */
#mainmenu span, #menuitem span{
    position: absolute;
    top: 50%;
    margin-top: -0.5em;
    color:white;
    text-decoration:none;
}

jQueryのソースコード

jQueryのソースは以下のようになります。

// 初期状態の設定(透明度を付け色を薄くする)
$('#mainmenu, #menuitem > div, #menuitem > a, .submenu > a').css({opacity: "0.7"});
// 2段目のメニューを消す
$('.submenu').hide();
 
// メニュー開閉のフラグ
var $clicked = false;
 
// 「Please click」のクリックイベント
$('#mainmenu').bind('click', function(){
    // 1段目のメニューが消えているか判定
    if($('#menuitem').css('display') == 'none'){
        // 一段目のメニューを閉じる
        $('#menuitem').slideDown();
        // 「Please click」のアイコンを上向きにする
        $('#mainmenu-img').attr("src","ArrowUp.png");
        // フラグをTrueにする
        $clicked = true;
    }
    else{
        // 一段目のメニューを開く
        $('#menuitem').slideUp();
        // 「Please click」のアイコンを下向きにする
        $('#mainmenu-img').attr("src","ArrowDown.png");
        // フラグをFalseにする
        $clicked = false;
    }
    
});
 
// 「Please click」のマウスオーバー/リーブのイベント
$('#mainmenu').bind({
    // マウスオーバー
    'mouseenter':function(){
        // 一段目のメニューが閉じている場合は色を濃くする
        if(!$clicked) $(this).fadeTo("fast",1);
    },
    // マウスリーブ
    'mouseleave':function(){
    	// 一段目のメニューが閉じている場合は色を元に戻す
        if(!$clicked) $(this).fadeTo("fast",0.7);
    }
});
 
// メニューのマウスオーバー/リーブのイベント
$('#menuitem > a, #menuitem > div, .submenu > a').bind({
    // マウスオーバー
    'mouseenter':function(){
        // マウスオーバーされたメニューの色を濃くする
        $(this).fadeTo("fast",1);
        // 2段目のメニューがある場合は、メニューを開く
        $('.submenu',this).fadeToggle(200);
    },
    // マウスリーブ
    'mouseleave':function(){
        // マウスリーブされたメニューの色を元に戻す
        $(this).fadeTo("fast",0.7);
        // 2段目のメニューがある場合は、メニューを閉じる
        $('.submenu',this).fadeToggle(200);
    }
});

// CSSプロパティの取得
$('セレクタ').attr("CSSプロパティ名");
// CSSプロパティの指定
$('セレクタ').css('CSSプロパティ名', '値');
// 複数のCSSプロパティの指定
$('セレクタ').css({CSSプロパティ名:'値', CSSプロパティ名:'値'});

$('セレクタ').fadeOut(ミリ秒);

fadeOutにミリ秒を指定せず「fadeOut()」とした場合は、400ミリ秒のアニメーションで指定したセレクタの要素を消す。

$('セレクタ').bind('イベント1 イベント2', function(){
   // イベントの処理
});

$('セレクタ').slideDown(ミリ秒);

$('セレクタ').slideUp(ミリ秒);

// 属性の値を取得する(設定されていない場合は「undefined」を返す)
$('セレクタ').attr("属性名");
// 属性に値を設定する
$('セレクタ').attr("属性名","値");
// 複数の属性に値を設定する
$('セレクタ').attr({属性名:'値', 属性名:'値'});

$('セレクタ').fadeTo(ミリ秒,透明度);

$(this).fadeToggle(ミリ秒);

※時間(ミリ秒)を指定できる箇所には、’fast'(早く)　’normal'(普通)　’slow'(遅く)という文字を指定することもできる。

CSS, JavaScript CSS, HTML, javascript, jQuery