PHP & JavaScript Room :: 設置サンプル

実行結果

CSS Dock Menu | 設置サンプル

▼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 &amp; 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>