jqueryとJavascriptを使ってウィンドウの横幅に応じてメニューの表示方法を動的に切り替える方法

ウィンドウの横幅に応じてサイドメニューの表示方法を切り替える

ウィンドウの横幅に応じてメニューを隠す HTML・CSSのサンプル 横幅を取得してメニューの表示を切り替える

Webサイトの作成で最も気にすべきところがページの横幅だ。横スクロールは、縦スクロールに比べて、
スムーズに行うことができない（一部のマウスでは、横スクロールに対応しているけど…一般的ではない）

左右のどちらかにメニューを設置すると、クライアントによっては、横スクロールしなければならなくなってしまう。
だいたいクライアント表示可能な横幅は、768～1280ピクセルといったところ。
768ピクセル以下に固定しているサイトもよくある（主にブログなのだが…）

PC Memoのように情報系サイトなど、メニューを常に出しておきたい、すばやく他の項目にたどり着けるようにしたいと
いった場合に768ピクセル以下のクライアントを配慮すると配置方法は、難解になってしまう。
本文の横幅が小さくなり読みにくくなるのは、本末転倒だ。

ウィンドウの横幅に応じてメニューを隠す

既にPC Memoで対応している方法だが、クライアントの横幅が850ピクセル以下ならサイドメニューを出さずに、
本文を全体に表示するようにしている。メニューを表示するには、下部に触れてポップアップで表示する。
※実際にウィンドウのサイズを変えてみるとよくわかると思う。

HTML・CSSのサンプル

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<!-- jqueryの読み込み -->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script>
<!--
// 
function ScreenSize_Menu(Type){
    var WindowSize = document.body.offsetWidth;
    if(WindowSize < 850){
        // 横幅が850ピクセル以下
        $('#menuid').hide(500);
        $('#main').css('width', '95%');
    }else{
        // 十分な横幅がある
        $('#menuid').show(500);
        $('#main').css('width', '65%');
    }
}
// -->
</script>
</head>
<body onresize="ScreenSize_Menu()">
<div id="main">
本文
</div>
<div id="menuid">
メニュー
</div>
</body>

CSS(スタイルシート)

#menu {
    overflow: auto;
    width: 30%;
    position: fixed;
    right: 1%;
    top: 2%;
}
#main {
    overflow: auto;
    float: left;
    width: 65%;
}

横幅を取得してメニューの表示を切り替える

単位は、ピクセルです。

function ScreenSize_Menu(Type){
    var WindowSize = document.body.offsetWidth;
    if(WindowSize < 850){
        // 横幅が850ピクセル以下
        $('#menuid').hide(500);
        $('#main').css('width', '95%');
    }else{
        // 十分な横幅がある
        $('#menuid').show(500);
        $('#main').css('width', '65%');
    }
}