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

2008/03/16 日 カテゴリ: カスタム・検証
先日、「CSS Dock Menu」導入についての質問メールを頂いたので、導入方法をご紹介します。
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」とします。

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

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

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

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


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

<!--top dock -->
<div class="dock" id="dock">
    <div class="dock-container">
        <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
        <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a>
        <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
        <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a>
        <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a>
        <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a>
        <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a>
        <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
    </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
    
    $(document).ready(
        function()
        {
            $('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
        }
    );

</script>


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

<!--bottom dock -->
<div class="dock" id="dock2">
    <div class="dock-container2">
        <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
        <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a>
        <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a>
        <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a>
        <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a>
        <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a>
        <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a>
        <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a>
        <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a>
        <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a>
    </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
    
    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>


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

<!--top dock -->
<div class="dock" id="dock">
    <div class="dock-container">
        <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
        <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a>
        <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
        <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a>
        <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a>
        <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a>
        <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a>
        <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
    </div>
</div>

<!--bottom dock -->
<div class="dock" id="dock2">
    <div class="dock-container2">
        <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
        <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a>
        <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a>
        <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a>
        <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a>
        <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a>
        <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a>
        <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a>
        <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a>
        <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a>
    </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
    
    $(document).ready(
        function()
        {
            $('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>

コードの中にある「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)を実現するライブラリ集

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

タグ: , , ,