クリックで表示・非表示が切り替わるメニューバー
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の「mmenu.js」で実装する
mmenuでスライドメニューを実装 よく見る横からスライドして出てくるメニューを …
-
-
もっと読み込む機能の実装の備忘録
もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …
-
-
スクロールしても画面上部に固定されるメニュー
jQeuryを読み込む まずHTMLをマークアップしていきます。 jQueryを …
-
-
上下スクロールに対応したパララックス効果
「skrollr」の特徴 Webサイトの演出手法であるパララックス効果は背景、画 …
-
-
横から出てくるサイドメニュー
Snap.jsをダウンロードして準備 まずはページを左右にスライドしてメニュー表 …
- PREV
- スクロールしても画面上部に固定されるメニュー
- NEXT
- 横から出てくるサイドメニュー