サイドメニュー固定

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

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

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

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

メニュー

JavaScript
PHP
HTML
CSS

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

01<!--html-->
02<div id="menucontainer" style="position:relative;top:0;left:-200px;width:180px;box-sizing:border-box;-moz-box-sizing:border-box;">
03<div id="fixmenu" style="padding:20px;background:#eff;margin:0;border:double 4px #222;">
04<p>メニュー</p>
05<ul>
06  <li>JavaScript</li>
07  <li>PHP</li>
08  <li>HTML</li>
09  <li>CSS</li>
10</ul>
11</div>
12</div>

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

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

1/*css*/
2$(document).ready(function(){
3    $('#fixmenu').exFlexFixed({
4        container : 'section#a2'
5    });
6 
7});

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

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