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

Brunch Menu By: Basheer Tome

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

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

DEMO

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

開閉式メニューのデモ

HTML & CSSのソースコード

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

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

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

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

HTML
 <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>
CSS
/* 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のソースは以下のようになります。

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);
    }
});
利用したjQueryの関数
CSSを指定する
// CSSプロパティの取得
$('セレクタ').attr("CSSプロパティ名");
// CSSプロパティの指定
$('セレクタ').css('CSSプロパティ名', '値');
// 複数のCSSプロパティの指定
$('セレクタ').css({CSSプロパティ名:'値', CSSプロパティ名:'値'});
要素を消す(フェードアウト)
$('セレクタ').fadeOut(ミリ秒);

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

fadeOutした要素はfadeInで表示させることができる。
イベントを設定する
$('セレクタ').bind('イベント1 イベント2', function(){
   // イベントの処理
});
「bind」以外にも「$(‘セレクタ’).click()」などでイベントが設定できるが、「bind」は複数のイベントをスペース区切りで指定が可能。
要素を上から下に伸びるようにスライドさせる
$('セレクタ').slideDown(ミリ秒);
slideDownにミリ秒を指定せず「slideDown()」とした場合は、デフォルトの400ミリ秒が設定される。
要素を下から上に縮むようにスライドさせる
$('セレクタ').slideUp(ミリ秒);
slideUpにミリ秒を指定せず「slideUp()」とした場合は、デフォルトの400ミリ秒が設定される。
要素の属性を取得 / 設定する
// 属性の値を取得する(設定されていない場合は「undefined」を返す)
$('セレクタ').attr("属性名");
// 属性に値を設定する
$('セレクタ').attr("属性名","値");
// 複数の属性に値を設定する
$('セレクタ').attr({属性名:'値', 属性名:'値'});
要素の透明度を徐々に変化させる
$('セレクタ').fadeTo(ミリ秒,透明度);
透明度は1.0 ~ 0.0まで指定可能。
要素の表示・非表示を切り替える
$(this).fadeToggle(ミリ秒);
「fadeIn」「fadeOut」を繰り返し順番に行う。

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

divider

Trackback URL

http://webnonotes.com/css/jquery-menu/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>