▼Mac OS X風のドックメニュー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>CSS Dock Menu | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/interface/interface-1.2.js"></script> <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> <!-- CSS --> <style type="text/css"> :focus { outline:none; } #demo { margin:0; padding:0; background:transparent url("/content/img/bg_windows.png") no-repeat 0 0; width:800px; height:600px; position:relative; } /* dock - top */ #dock { position:relative; height:50px; background:transparent url("/content/img/bg_black.png") repeat 0 0; text-align:center; } .dock-container { position:absolute; height:50px; padding-left:20px; } a.dock-item { display:block; width:40px; color:#000; position:absolute; top:0px; text-align:center; text-decoration:none; } .dock-item img { border:none; margin:5px 10px 0 10px; width:100%; } .dock-item span { display:none; padding-left:20px; color:#fff; white-space:pre; font-size:11px; font-weight:bold; } /* dock2 - bottom */ #dock2 { position:absolute; left:0px; bottom:0px; width:100%; height:50px; background:transparent url("/content/img/bg_black.png") repeat 0 0; text-align:center; } .dock-container2 { position:absolute; height:50px; padding-left:20px; } a.dock-item2 { display:block; width:40px; color:#000; bottom:0px; position:absolute; text-align:center; text-decoration:none; } .dock-item2 span { display:none; padding-left:20px; color:#fff; white-space:pre; font-size:11px; font-weight:bold; } .dock-item2 img { border:none; margin:5px 10px 0 10px; width:100%; } </style> <!--[if lt IE 7]> <style type="text/css"> .dock img { behavior:url(/content/jslib/iepngfix.htc) } </style> <![endif]--> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1><a href='http://www.ndesign-studio.com/blog/design/css-dock-menu/'>CSS Dock Menu</a> | 設置サンプル</h1> <p>▼Mac OS X風のドックメニュー</p> <!-- CODE --> <div id="demo"> <!--top dock --> <div class="dock" id="dock"> <div class="dock-container"> <a class="dock-item" href="#"><img src="/content/img/vistaicon/home.png" alt="home" /><span>Home</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/email.png" alt="メール" /><span>メール</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/internet.png" alt="インターネット" /><span>インターネット</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/photo.png" alt="マイピクチャ" /><span>マイピクチャ</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/music.png" alt="マイミュージック" /><span>マイミュージック</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/history.png" alt="履歴" /><span>履歴</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/calendar.png" alt="カレンダー" /><span>カレンダー</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/printer.png" alt="印刷" /><span>印刷</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/favorite.png" alt="お気に入り" /><span>お気に入り</span></a> <a class="dock-item" href="#"><img src="/content/img/vistaicon/gomibako.png" alt="ごみ箱" /><span>ごみ箱</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="/content/img/vistaicon/home.png" alt="home" /></a> <a class="dock-item2" href="#"><span>メール</span><img src="/content/img/vistaicon/email.png" alt="メール" /></a> <a class="dock-item2" href="#"><span>インターネット</span><img src="/content/img/vistaicon/internet.png" alt="インターネット" /></a> <a class="dock-item2" href="#"><span>マイピクチャ</span><img src="/content/img/vistaicon/photo.png" alt="マイピクチャ" /></a> <a class="dock-item2" href="#"><span>マイミュージック</span><img src="/content/img/vistaicon/music.png" alt="マイミュージック" /></a> <a class="dock-item2" href="#"><span>履歴</span><img src="/content/img/vistaicon/history.png" alt="履歴" /></a> <a class="dock-item2" href="#"><span>カレンダー</span><img src="/content/img/vistaicon/calendar.png" alt="カレンダー" /></a> <a class="dock-item2" href="#"><span>印刷</span><img src="/content/img/vistaicon/printer.png" alt="印刷" /></a> <a class="dock-item2" href="#"><span>お気に入り</span><img src="/content/img/vistaicon/favorite.png" alt="お気に入り" /></a> <a class="dock-item2" href="#"><span>ごみ箱</span><img src="/content/img/vistaicon/gomibako.png" alt="ごみ箱" /></a> </div> </div> </div> <!-- / CODE --> </div> </body> </html>