及川WEB室｜ホームページ制作

及川WEB室

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。

及川WEB室 > JavaScript > 開閉式メニュー

開閉式メニュー

開閉式メニューボタン。
メニューの項目が多い場合など、サブメニューを折りたたんで閉じておくとすっきりします。

jQuery を使った開閉式メニュー

jQuery は javascript のライブラリです。
jQuery でも開閉式メニューが作れます。
下記のサイトを参考にさせていただきました。
開閉式のメニューを作る - jQuery 日本語リファレンス

jQuery をダウンロード

jQuery は下記よりダウンロードできます。
jQuery
※バージョン2以降の「jQuery 2.x」は、IE8以下はサポートしていませんので、
IE8以下では機能しません。

サンプル

▼ JavaScript

▼ Facebook

ソースコード

head



<script></script>

上記1行目、ダウンロードしたjQuery のファイルを読み込む。
1行目の「●●●」は、「jquery-1.10.2.min.js」ファイルを格納した場所までのディレクトリ。
5行目の「.hide()」でメニューのリスト部分を隠す。
6行目から、h4 をクリックした時の挙動。

css

#navi {
	border:1px solid #CCC;
    }
#navi h4 {
	padding:2px 5px;margin:2px;
    background:#F8F8F8;
    border:1px solid #CCC;
    text-shadow:1px 3px 2px #CCC;	/* ボタンテキストの影 */
    box-shadow:#666 3px 3px 7px;	/* 枠の影 */ 
    -moz-box-shadow:#999 3px 3px 7px;	/* Firefox */ 
    -webkit-box-shadow:#666 3px 3px 7px;	/* Safari,Google Chrome */
}
#navi h4:hover {
	position:relative;left:1px;top:1px;
    }

装飾です。ご自由に改変して下さい。

メニュー部分



▼ JavaScript
<ul class="sub">
<li>HTMLタグやソースコードを表示する</li>
<li>開閉式メニュー</li>
<li>tinyMCEで作った記事内の<p>タグを消す/改行を<br>にする</li>
<li>画像をかっこよく表示する lightbox</li>
</ul>

▼ Facebook
<ul class="sub">
<li>Facebook のアルバムの表紙を変える</li>
<li>Facebookの投稿を1件のみ表示する方法</li>
<li>ウェブサイトに[いいね！]する</li>
<li>ウェブサイトの[いいね！]を取り消す</li>

上記の1行目で、メニューにしたい個所に id を指定（id="navi"）している。
リンク先やリンク文字を書き換えてください。
見出し<h4>～</h4> とリスト<ul>～</ul> で 1セット。自由に増減してください。
<li>～</li> も自由に増減してください。

以上です。

JavaScript と CSS を使った開閉式メニュー

jQuery を使わずに、JavaScript と CSS の組み合わせの方法もあります。
下記のサイトを参考にさせていただきました。
開閉式ツリー型メニュー| PHP & JavaScript Room

↑こちらのサイトで公開されているサンプルの、JavaScript 部分は特に修正することなく、HTMLのソースコードに手を加えれば、メニューを増やすことができます。

このサイトの左サイドメニューで使用しています。