サイト開発日記

Just another WordPress site

*

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

   

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;
}

 

デモページ

 

 - jquery

Message

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

  関連記事

no image
横から出てくるサイドメニュー

Snap.jsをダウンロードして準備 まずはページを左右にスライドしてメニュー表 …

no image
上下スクロールに対応したパララックス効果

「skrollr」の特徴 Webサイトの演出手法であるパララックス効果は背景、画 …

no image
スクロールしても画面上部に固定されるメニュー

jQeuryを読み込む まずHTMLをマークアップしていきます。 jQueryを …

no image
もっと読み込む機能の実装の備忘録

もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …

no image
スマホに効果的なスライドメニューをjqueryの「mmenu.js」で実装する

mmenuでスライドメニューを実装 よく見る横からスライドして出てくるメニューを …