HOME > > > レスポンシブWebデザインでブラウザの幅を狭めた時にメニューをアコーディオンにする方法

レスポンシブWebデザインでブラウザの幅を狭めた時にメニューをアコーディオンにする方法

アコーディオン

ブラウザサイズによってナビゲーションを変えいたい

レスポンシブWebデザインはブラウザの幅によってレイアウトを変更できます。
その時にメインナビゲーションも押しやすい様に変更しますが、縦にズラーっと並んでしまうとスクロールする時にコンテンツにたどり着くまでに無駄に長くなってしまいます。
ブラウザサイズによってナビゲーションがアコーディオンの様に収まりがよくなると使いやすいかと思います。

サンプルはこちら

MeanMenuをダウンロードします

こちらのサイト「MeanMenu」からダウンロードします。
下の方に「MEANMENU ZIP DOWNLOAD」とあるのでそこからダウンロードしてください。

MeanMenu

使うファイル

ダウンロードしてきたファイルを解凍するとファイルが入ってます。
その中で使うファイルはこちらの2つです。
・jquery.meanmenu.js
・meanmenu.css

html内に設置します

html設置の例です。
「meanmenu.css」「jquery」「jquery.meanmenu.js」「変更になるブラウザサイズ」を設置します。
以下のソースをhead内に入れてください。

<script src="css/meanmenu.css"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/responsiveImg.js"></script>
<script>
jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
});
</script>

解説

「headerのnavに適用になりますよー」という事になります。

ナビゲーションのhtml

ナビゲーションは「li」で囲ってください。

<header>
<nav>
<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>
</nav>
</header>

ブラウザサイズの設定

切り替えるブラウザサイズを設定します。 「jquery.meanmenu.js」の36行目に「meanScreenWidth」という部分があります。 そこの数字を変更すると切替サイズが適用されます。

meanScreenWidth: "640",

設定完了

これで設定完了です。
ナビゲーションの色を変更したい場合は、「meanmenu.css」を触ってくださいね。

記事参考

jQueryプラグインまとめのカルマ

参考にさせて頂きました。ありがとうございました。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket