ウィンドウの幅に応じて、動作とデザインが切り替わるナビゲーションを作ってみました。ウィンドウ幅が広ければヘッダーに横一列で表示し、スマフォなどの場合はボタンで操作でナビゲーションが開閉します。
html
<header class="header">
<h1>sample-responsive_menu</h1>
<button class="menu_btn none">メニュー</button>
<nav class="navigation">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
</nav>
</header>
PCなどではヘッダーに横一列に、スマフォでは縦に並べて必要なときにボタンで開閉させる、オーソドックスなナビゲーション。
css
.none{
display: none;
}
.menu_btn{
cursor: pointer;
padding: 10px;
}
.navigation li{
list-style: none;
}
@media screen and (min-width: 641px) {
.navigation li{
float: left;
margin: 10px;
}
}
jQuery
jQuery(function() {
var $btn = jQuery('.menu_btn');
var $nav = jQuery('.navigation');
/*
* ブラウザのウィンドウ幅を取得してメニューボタンとナビゲーションの表示/非表示を切り替え
*/
jQuery(window).resize(function(){
var w = jQuery(window).width(); //ブラウザの幅を取得
var x = 768; //ブレイクポイントを設定
if (w <= x) { // ウィンドウサイズが768px以下
jQuery($btn).removeClass('none');
jQuery($nav).addClass('none');
} else { //ウィンドウサイズが768以上
jQuery($btn).addClass('none').text('メニュー'); //非表示・文字をメニューにする
jQuery($nav).removeClass('none').removeAttr('style'); //表示・styleを初期化する
}
});
/*
* クリックイベントによるスライドダウン/アップ
*/
jQuery($btn).on('click',(function(){
if (jQuery($nav).css('display')=='none'){
jQuery($nav).slideDown('slow');
jQuery($btn).text('メニューを閉じる');
} else {
jQuery($nav).slideUp('fast');
jQuery($btn).text('メニュー');
}
})
);
});
開閉ボタンとナビゲーションは、ウィンドウ幅に応じて.noneを付けたり取ったりしてdislplayの状態をコントロールします。ナビゲーションが閉じているときはボタンの文字が「メニュー」、開いているときは「メニューを閉じる」になります。
PC閲覧時にウィンドウ幅をリサイズした場合も考慮していて、ウィンドウ640px以下にしてナビゲーションを開いた後、ウィンドウサイズを641px以上にした場合、ナビゲーションはいったん初期化。非表示になります。ボタンの文字もメニューに戻ります。
高機能なjQueryプラグインがいろいろあるので使ってもいいのですが、自分で作ったほうがカスタマイズが簡単だったり、設置が手軽だったりするかと。
なにより自分で作ってみるといろいろと勉強になります。
※なお、jQuery(window).resize(function(){/*何らかの処理*/});という記述でウィンドウ幅を取得しているのですが、リサイズし続ける間中取得し続けるので、発火する処理によってはブラウザに負荷がかかるようです。注意が必要かと思います。
参考：[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
