サイドメニュー固定

メニュー固定プラグインexflexfixed

まず、jQueryのプラグインであるexflexfixedをダウンロードする。

ダウンロードしたら下記のようにページ内で読み込む。

/*css*/
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.exflexfixed-0.3.0.js"></script>

メニュー

JavaScript
PHP
HTML
CSS

menuを作り配置するが、プラグインを適用させるidがposition:fixed配置だろうから、position:ralativeは包括divに適用する。


<div id="menucontainer" style="position:relative;top:0;left:-200px;width:180px;box-sizing:border-box;-moz-box-sizing:border-box;">
<div id="fixmenu" style="padding:20px;background:#eff;margin:0;border:double 4px #222;">
<p>メニュー</p>
<ul>
  <li>JavaScript</li>
  <li>PHP</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>
</div>
</div>

$(document).ready(function(){部分は、$(function(){でもよい。

$('#fixmenu').exFlexFixed({で、idがfixmenuのdivに対して固定化を行う。固定する範囲は、idがa2のsection内だけで、フッター部分に来たらそこでストップする。bodyにするとフッターに被さる形でメニューが移動する。

/*css*/
$(document).ready(function(){
	$('#fixmenu').exFlexFixed({
		container : 'section#a2'
	});

});

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>