ExFlexFixed
スクロールしても追従するメニュー (改良版)
スクロールしても追従するメニューを作成しましたが、ちょっと気に入らない仕様だったので、改良版を作成してみました。この方法は、北研のQHM Proのサイトと同じような動きをします。
通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ常に表示する方法です。下までスクロールしてフッターが表示されると、フッターがすべて表示されるまでスクロールしますが、そのときメニューは固定しているのではなく、上にスクロールし自然な感じで見やすくしてくれます。文章での説明は難しいので、画面サイズを小さくして実際の画面で確認してください。
2カラムと3カラムの両方に対応しています。CSSとjQueryを使用します。
3カラムの場合、どちらか長い方のメニューに合わせてスクロールします。
どのデザインを使用してもOKのはずです。4つのデザインでは確認済み。
以下のサイトを参考にさせてもらいました。
Cyokodog :: Diary http://d.hatena.ne.jp/cyokodog/20120427/exflexfixed01
【作成手順】
- 以下のURLを開く(参考にしたサイト)
http://d.hatena.ne.jp/cyokodog/20120427/exflexfixed01 - 画面下部にある ダウンロード から jquery.ex-flex-fixed.zip をダウンロードする
- ファイルを解凍し、以下のファイルをFTPで QHMの js フォルダにアップする。
jquery-1.7.1.min.js
jquery.exflexfixed-0.2.0.js - 以下のスクリプトを
メニューナビ2にコピペする。
たったこれだけです。CSSはこのスクリプト内に記述してあります。
【解説】
- jQueryの Ex Flex Fixed を使用してメニューを必要に応じて固定位置に表示します。
- QHMの メニュー1、メニュー2、コンテンツの各IDに対し表示位置を操作します。
【コード】
#beforescript{{ <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.exflexfixed-0.2.0.js"></script> <script> jQuery(function(){ $('#sidebar,#sidebar2').exFlexFixed({ container : '#main', }); }); </script> <style type="text/css"> /* clearfixでwrapperに高さを出す */ #main, div.contents-wrapper{ /zoom : 1; } #main:after{ content : ''; display : block; clear : both; } /* メニュー1(左メニュー) */ #wrap_sidebar{ position : relative; z-index:1; } /* メニュー2(右メニュー) */ #wrap_sidebar2{ position : relative; z-index:1; } </style> }}