MS Access Tips/Sample and VBA and Blog customize etc...

jQueryスライドメニューをクッキー対応に

以前の記事 jQuery でスルッとスライドメニュー でスライドするメニューを設置しましたが、これには、ドッキング機能が付いています。タイトルバーの「固定」をクリックすると、ページ画面に固定されるというものです。ページをスクロールしてもこのメニューには移動せずに固定された位置のままです。ディスプレイの幅が大きい方は、固定しておくとメニュー項目にすぐアクセスできて便利ですね。

しかし、更新したり、別のページに移動したりすると解除されてしまいます。これでは、ドッキングの意味があまりないです。これが気になっていたので、クッキーに記憶させておいて、更新したり、ページ移動してもドッキング状態が維持されるようにするのに挑戦してみました。

難易度:

まず、クッキーへの読み書きですが、サイズを記憶するフォントサイズ変更ボタン で作成した関数がありますので、今回はそれをそのまま利用することにしました。jQueryには、Cookie Plugin というのがあるのでそれを利用してもいいかも知れません。Cookie Plugin を導入している、あるいは、別の関数をすでに作成しているという方は、クッキーの読み書き部分をそれに合わせて書きかえてください。

テンプレートのHTMLの headブロック内に下記のスクリプトを記述

コード内の48行目、51行目(ハイライト部分)の container の部分は、コンテンツ全体を覆う要素のID名にします。(以前の記事 参照)

スタイルシートは以前からちょっと変更して下記のようにしました。

前回のときはスクリプトをページ読み込み時のイベントで実行してましたが、これだと、ページの読み込みが完了するまでまたされますので、必要な要素が読み込まれた直後に、 AdvancedDocking() を実行するようにしました。具体的には、コンテンツ全体を覆う要素の開始タグの直後です。(軽いページなら、読み込み時でいいと思いますが)

また、スライドメニューのリスト要素に表示するリストの記述のFC2ブログにおける具体例は 以前の記事を参照してください。


拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/149-96936e6b
該当の記事は見つかりませんでした。