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

jQuery でスルッとスライドメニュー

ナビゲーションバーというかメニューバーがタイトル下に設置してあるのですが、なんか物足りない。カテゴリとかをドロップダウンで表示させたらどうかとか、いろいろ考えていました。

以前紹介したページスクロールは jQueryライブラリを使ったものなのですが、せっかくjQueryを導入したのでそれを使ったメニューでいいものがないか探していたのですが、そんななかで、ちょっと面白いサンプルを見つけました。

Advanced docking using jQuery

デモページ
Demo for Advanced Docking using jQuery

既に設置してあるので気がついた方もいると思いますが、左端のタブへマウスを持って行くとメニューがスライドして出てくる物です。(追記: 現在は撤去してます。)

AdvancedDocking.png

難易度:

動作は試してもらえれば分かると思いますが、左サイドのボタンの上にマウスを重ねるとメニューがスライドして出てきます。メニューのタイトルの「固定」リンクをクリックすると開いたまま固定されます。他のボタンのメニューも「固定」すると分割して表示されます。「固定解除」をクリックでそのメニューは閉じます。

設置方法は、jQueryを利用しますので、まだ導入してない場合は、下記から最新版をダウンロードして設置します。

上記のサイトの Download the example から必要なファイル一式がダウンロードできます。jQueryファイルも入ってますが、バージョンがちょっと古いようなので、最新版を下記からダウンロードしてもいいでしょう。
Downloading jQuery - jQuery JavaScript Library

本家のサンプルページのコードを参考にしてもいいですが、下記にも設置サンプルコードがあります。
Ajax » jQuery plugin » タブ | PHP & JavaScript Room

当ブログの設置コード

当ブログには、ボタンの画像、メニューの色、サイズ等を変更して設置しました。

HTMLの <head>~</head>内に、スクリプトを記述します。

コードの #container の部分は、HTMLでコンテンツ全体を囲んでいる要素名(ID名)にしてください。本家のサンプルでは、#content になっています。

スタイルシートに下記のスタイルを追加します。

HTMLの <body>直後に、下記のリストを記述します。

メニュー項目は、お勧めの記事、カテゴリ、月別アーカイブ にしてみました。カテゴリ、月別アーカイブ はFC2専用なので他のブログの方は読み替えてください。

切り貼りコードですので、読みにくいですが、ご容赦ください。


拍手する

2 Comments

MCMLXV_65 says..."これも面白い機能ですね!"

スルスルっとページスクロールを導入して以来、いろいろと興味が沸いているのですが、これもSo-netブログに適用できないか? ちょっと挑戦してみたくなりました。また、結果が出たら、ご報告に参りますね。これからも、よろしくご指導お願い致します!!

2009.07.04 12:23 | URL | #- [edit]
hatena says...""

ページスクロールが動作するなら、たぶん、こちらも動作すると思います。
コンテンツ全体を囲むタグの前に、このリストタグを記述するのがこつですね。
最初は本家のコードで正常動作させてから、自分のブログのデザインにあうようにスタイルシート等をカスタマイズするといいと思います。

2009.07.04 18:30 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

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