スクロールでサイドメニューが見えなくなってしまうのを回避するときに便利なのがjQueryのプラグイン「Fit sidebar」。サイドメニューがなくならないのでユーザビリティも良くなります。
目次
Fit sidebarのダウンロード
こちらの jquery.sitekit からダウンロードして解凍。「fit-sidebar」フォルダがありますのでこちらを利用します。
Fit sidebarの使い方
ファイルの読み込み
jquery.fit-sidebar.cssファイルとjquery.fit-sidebar.jsファイルを読み込みます。
1. head内でjquery.fit-sidebar.cssを読み込み
<link rel="stylesheet" href="css/jquery.fit-sidebar.css">※中身は少ないのでそのままご自身のスタイルシートに貼りつけてしまってもOKです。
2. /bodyの手前でjquery.fit-sidebar.jsを読み込み
<script type="text/javascript" src="js/jquery.fit-sidebar.js"></script>※jquery.jsの後に読み込んでください。
html
<div class="page-header"></div>
<div class="page-body">
<div class="main">
<div class="contents"></div>
</div>
<div class="sub">
<div class="contents"></div>
</div>
</div>
<div class="page-footer"></div>javascriptの記述
jquery.fit-sidebar.jsを読み込んだ後に以下を記述します。クラス名はご自身のサイトの名前に変更してください。
<script type="text/javascript">
$('.sub .contents').fitSidebar({
wrapper : 'div.page-body',
responsiveWidth : 800
});
</script>| $() | サイドメニュークラスを指定します。例）.sub .contents |
|---|---|
| wrapper | 大枠のクラスを指定します。例）.page-body |
| responsiveWidth | レスポンシブの場合サイドメニューが表示されるpxサイズを指定します。例）800px |