CSS Dock Menu(OSXのドック風メニュー)

RW3.6検証済み
このエントリの内容は RapidWeaver 3.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」を編集します。
まず、1行目の…

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)を実現するライブラリ集



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

blog comments powered by Disqus