CSS Dock Menu（OSXのドック風メニュー）

2008/03/16 日 カテゴリ: カスタム・検証
RW3.6検証済み
先日、「CSS Dock Menu」導入についての質問メールを頂いたので、導入方法をご紹介します。
CSS Dock Menu が何なのか分からない人はとり合えず Demo をご覧下さい。（上下に配置したアイコン群がそれ。）

では早速。
まず、 N.Design Studio というサイトから CSS Dock Menu をダウンロードします。（ページの上の方に Download CSS Dock Menu というリンクがあります。）
次に、Rapidweaver で CSS Dock Menu を挿入するページを作成します。今回は「HTMLコード」を使いました。とり合えずフォルダ名を「dock」、ファイル名を「index.html」とします。

ページインスペクタを開き、カスタムヘッダに以下のコードを挿入します。

次に以下のコードをカスタムCSSに挿入して下さい。

.dock img { behavior: url(iepngfix.htc) }


HTML入力欄にはとりあえず以下のコードを入力した方がカスタムしやすいでしょう。#の所にリンク先のアドレスを入力すればメニューとして機能します。後は画像やテキストを編集して下さい。
ページ最上部にメニューを表示したい場合は…


ページ最下部にメニューを表示したい場合は…


両方にメニューを表示したい場合は…

コードの中にある「dock menu JS options」は編集画面の中ならどこに置いても大丈夫です。（ヘッダにの中に入れてしまっても動作するようですが。）

次に、先程ダウンロードしたフォルダの中にある「style.css」を編集します。
まず、１行目の…

body { font: 11px Arial, Helvetica, sans-serif; background: #ffffff url(images/main-bg.gif); padding: 0; margin: 0;}

は必要ないのでごっそり削除します。

次に、Dockの背景がいらない場合は以下の部分も削除していいと思います。（アイコンに透過画像が使われていますが、カスタムCSSに記入したコードによりIE6でも透過画像が正常に機能するようになっているようです。ただし、最下部に配した場合は表示が乱れる気が…。ウチのWin機のメモリが足りないだけかもしれませんが…。）

.dock-container { position: absolute; height: 50px; background: url(images/dock-bg2.gif); padding-left: 20px;}

このCSSは最上部に表示する時のもの。

.dock-container2 { position: absolute; height: 50px; background: url(images/dock-bg.gif); padding-left: 20px;}

このCSSは最下部に表示する時のもの。

注意しなければならのいのが、ドックを最下部に表示する場合。CSS Dock Menu は、最下部に表示する為に position: absolute を使っているのですが、Rapidweaver は始めから footer 領域を持っているのでドックとフッタが重なってしまいます。ですので以下の部分を調整して使っているテーマで正しく表示出来るようにして下さい。（テーマによって違うみたいです。）

#dock2 { width: 100%; bottom: 0px; position: absolute; left: 0px;}


今回はこのようにしました。

#dock2 { width: 100%; bottom: 0px; position: absolute; left: 120px;}


最下部に表示する為に position: absolute を使っているので、サイドバーを配置していても当然それも無視されます。style.css をデフォルトで使うと、最下部に表示するドックは、恐らく画面の左下に表示されますので、そこにサイドバーがある場合は重なってしまっていると思います。そうではない場合でもレイアウトは崩れているはずです。今回その部分を調整しましたが、お世辞にもスマートに表示する方法はわかりませんでした。（他に表示する方法があると思います。）

最後に、ダウンロードしたフォルダの中の「HTMLファイル」以外をすべて、ページと同じ階層にアップします。今回の例で言うと「dock」フォルダにアップして下さい。一応書いておくと、「dock」フォルダの中に…
  1. index.html（今回の例で言うとサンプルページ）
  2. images（フォルダ）
  3. js（フォルダ）
  4. iepngfix.htc
  5. style.css
が入っていると思います。CSSファイルはアップしないで、ページインスペクタのカスタムCSSの中に記述してもいいでしょう。

以上ですが、正直あまり自信はありません(笑)。
今回作成したサンプルです。

関連リンク：【coliss】MacOS Xのドック風エフェクト(fisheye)を実現するライブラリ集
ブログパーツ

【このエントリに使ったプラグイン・ツール】

ブログパーツ

タグ: , , ,