olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、サイト内の移動を効率的にナビゲーションするスクリプトサンプル設置方法

  1. Home>
  2. ナビゲーション>
  3. ドッグメニュー>
  4. MacOSXっぽいメニュー

ドッグメニューMacStyleDock.js

MacOSXっぽいメニュー

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css"> 
 
  #dockContainer{
    display    : table;
    margin     : 0 auto;
    text-align : center;    /* fixes IE bug */
  }
 
  #dockContainer > div{
    display : inline-block; /* fixes IE bug */
  }
 
  #dockContainer > div{
    display : inline;       /* fixes IE bug */
  }
 
  #dockContainer > div{
    display       : table-cell;
    text-align    : left;
    background    : url('dock-centre-40.png') repeat-x 0 104px;
    border-bottom : 1px solid rgb(220,220,200);
  }
 
  #dockContainer > div > div{
    background : url('dock-right-40.png') no-repeat right 104px;
  }
 
  #dockContainer > div > div > div{
    background : url('dock-left-40.png') no-repeat left 104px;
    height     : 128px;
    overflow   : hidden;
    padding    : 0 10px;
  }
 
</style> 
<script type="text/javascript" src="MacStyleDock.js"></script>
</head>

<body>
<div id="dockContainer"><div><div><div id="dock"></div></div></div></div> 
  <script type="text/javascript"> 
 
    var dock = new MacStyleDock(
	document.getElementById('dock'),
	[
          {
            name:      'h1_',
            extension: '.png',
            sizes:     [48, 128],
            onclick:   function(){
                         location.replace('#');
                       }
          },
		  {
            name:      'h2_',
            extension: '.png',
            sizes:     [48, 128],
            onclick:   function(){
                         location.replace('#');
                       }
          },
		  {
            name:      'h3_',
            extension: '.png',
            sizes:     [48, 128],
            onclick:   function(){
                         location.replace('#');
                       }
          },
		  {
            name:      'h4_',
            extension: '.png',
            sizes:     [48, 128],
            onclick:   function(){
                         location.replace('#');
                       }
          },
		  {
            name:      'h5_',
            extension: '.png',
            sizes:     [48, 128],
            onclick:   function(){
                         location.replace('#');
                       }
          }
		  
          
        ],
        48,
        128,
        2.5);
 
  </script> 
</body>
</html>

MacOSXっぽいドックメニューを作成できるスクリプトです。
画像は自分で各２種類ずつ（最小と最大サイズ）作成しなければなりません。
後、実装するのは少しだけ難しいかもしれません。

アイコンはこちらからダウンロードできます。
http://www.icondrawer.com/free.php 

ダウンロード＆<head>設定

まずは製作元のサイトへ行き、MacStyleDock.jsをダウンロードしてきて下さい。
圧縮されたものとそうでないものがありますが、ここでは圧縮されて無いものをゲットします。
任意の場所へアップロードしたら、使用したいページへこのファイルを読み込ませます。

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

これで下準備は完了です。

HTML要素のマークアップ

メニューを表示した居場所に、以下の要素を記述します。

<div id="dockContainer"><div><div><div id="dock"></div></div></div></div>　

ここにドックメニューが表示されるようになります。

画像の用意

メニューで表示する画像を用意します。
１つのメニュー項目につき最小サイズと最大サイズの２種類を用意しなければなりませんので注意してください。
画像の名前も重要ですので、以下の様な法則で名前をつけます。

最小サイズの画像　…　namae_横幅.拡張子
最大サイズの画像　…　namae_横幅.拡張子　

namaeの部分は適当なものをつけて、横幅の部分にはそれぞれの画像の横幅を数値で指定します。
拡張子は、jpgやpngなど画像に合ったものを付けてください。
このサイトのサンプルは、最小サイズが48ｐｘ最大サイズが128pxなので、一つの項目に対して以下のように２つの画像を用意しています。

最小サイズの画像　…　h1_48.png
最大サイズの画像　…　h1_128.png　

MacStyleDock.jsの修正

デフォルトのままだと画像の指定が分かりにくかったので、155行目を削除、修正してください。

//+ '-full' 　

次は動作の指定を行います。

メニューを設定する記述

次にメニューを表示する為の記述を行います。
必ず前述したHTML要素の後に記述してください。基本は以下の形です。

<script type="text/javascript">
var dock = new MacStyleDock(
document.getElementById('dock'),
[
          {             name:      'h1_', //ここに画像ファイルの横幅の数値を削除した名前を記述する
            extension: '.png', //画像の拡張子
            sizes:     [48, 128], //画像のサイズ[最小,最大]
            onclick:   function(){
                         location.replace('#'); //メニューをクリックした時の動作
                       }           } ],
        48, //画像の最小サイズ
        128, //画像の最大サイズ
        2); //よく分かりません（汗）
</script>　

上記の記述を丸ごとコピペで設定すると、メニュー項目が１つだけ表示されます。
複数個設定する場合は、nameなどのディテールを増やせばOKですが、
細かい所は、このサンプルのコードを見て参考にしてください。 

関連スクリプト

感想

使うケースや場所が難しそうですが、ちょっと気分転換にいいかもしれません。メインメニューとしてはきついですかね。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。