クリックで表示・非表示が切り替わるメニューバー

jqueryをHTMLに組み込む

下記のコードをHTMLに記述してjqueryを読み込みます。

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script>window.jQuery || document.write(‘<script src=”/common/javascript/jquery.min.js”><\/script>’)</script>

続いて、HTMLにメニューバーとそれを開閉するための要素を記述します。

<div id=”menu”>
<div id=”menu_text”>
<ul>
<li><a href=”#”>メニュー1</a></li>
<li><a href=”#”>メニュー2</a></li>
<li><a href=”#”>メニュー3</a></li>
<li><a href=”#”>メニュー4</a></li>
</ul>
<a href=”#” id=”menu_off”>メニューを隠す</a>
</div>
</div>
<img src=”画像URL” width=”50″ height=”50″ id=”menu_redisp”>

メニューバーの表示・非表示の処理を記述

次に、メニューバーの表示・非表示処理をJavaScriptに記述します。

$(function(){
$(“#menu_off,#menu_redisp”).click(function(){
$(“#menu,#menu_redisp”).slideToggle();
});
});

CSSでメニューバーの表示位置を指定

次にメニューバーと開閉用の画像に対しそれぞれのサイズと

「position:fixed;」でスクロールしても固定位置に表示されるように

指定します。

#menu_redisp{
position: fixed;
width: 60px;
right: 0;
}
#menu{
display: none;
position: fixed;
height: 30px;
width: 100%;
border: none;
background-color: #888888;
}

デモページ