Ajax,Javascript、サイト内の移動を効率的にナビゲーションするスクリプトサンプル設置方法
ツリー型メニュー
jquery.treeview.js
<!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>jQuery treeView</title> <link rel="stylesheet" href="jquery.treeview.css" /> <link rel="stylesheet" href="screen.css" /> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <ul id="filetree" class="treeview-red"> <li><span>Item 1</span> <ul> <li><span>Item 1.0</span> <ul> <li><span>Item 1.0.0</span></li> </ul> </li> <li><span>Item 1.1</span></li> <li><span>Item 1.2</span> <ul> <li><span>Item 1.2.0</span> <ul> <li><span>Item 1.2.0.0</span></li> <li><span>Item 1.2.0.1</span></li> <li><span>Item 1.2.0.2</span></li> </ul> </li> <li><span>Item 1.2.1</span> <ul> <li><span>Item 1.2.1.0</span></li> </ul> </li> <li><span>Item 1.2.2</span> <ul> <li><span>Item 1.2.2.0</span></li> <li><span>Item 1.2.2.1</span></li> <li><span>Item 1.2.2.2</span></li> </ul> </li> </ul> </li> </ul> </li> <li><span>Item 2</span> <ul> <li><span>Item 2.0</span> <ul> <li><span>Item 2.0.0</span> <ul> <li><span>Item 2.0.0.0</span></li> <li><span>Item 2.0.0.1</span></li> </ul> </li> </ul> </li> <li><span>Item 2.1</span> <ul> <li><span>Item 2.1.0</span> <ul> <li><span>Item 2.1.0.0</span></li> </ul> </li> <li><span>Item 2.1.1</span> <ul> <li><span>Item 2.1.1.0</span></li> <li><span>Item 2.1.1.1</span></li> <li><span>Item 2.1.1.2</span></li> </ul> </li> <li><span>Item 2.1.2</span> <ul> <li><span>Item 2.1.2.0</span></li> <li><span>Item 2.1.2.1</span></li> <li><span>Item 2.1.2.2</span></li> </ul> </li> </ul> </li> </ul> </li> <li class="open"><span>Item 3</span> <ul> <li class="open"><span>Item 3.0</span> <ul> <li><span>Item 3.0.0</span></li> <li><span>Item 3.0.1</span> <ul> <li><span>Item 3.0.1.0</span></li> <li><span>Item 3.0.1.1</span></li> </ul> </li> <li><span>Item 3.0.2</span> <ul> <li><span>Item 3.0.2.0</span></li> <li><span>Item 3.0.2.1</span></li> <li><span>Item 3.0.2.2</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> </body></html>
スライドアニメーションをするツリーメニューです。
他にもアニメーション無し、メニュー追加、などもできますが、ここではスライドアニメーションのみ紹介します。
画像とCSSの調整を行えば、プラスマイナスだけでなく、お好みでデザインも可能です。
また、Cookieに開閉状況を記録するので、ページ移動時に余計に迷うことなく便利かと思います。
まずはダウンロードタブからサイトへ行き、jquery.treeview.zipをダウンロードしてきます。
解凍したら様々なファイルが出てきますが、とりあえず「lib」フォルダ、「images」 フォルダをアップロード。
それから一番上の階層にある、jquery.treeview.jsもアップします。
アップロードが完了したら、必要なスクリプトをページに読み込ませます。
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.treeview.js" type="text/javascript"></script>
主に必要なのはこの３つです。パスはアップした場所のものに変更してください。
次に、トリガー的な記述を行います。
<script type="text/javascript">
$(document).ready(function(){
$("#filetree").treeview({//ターゲットとなる要素に付加するID
animated: "fast", //アニメーション設定（削除するとアニメ無し）
collapsed: true, //開閉設定（削除するとロード時にメニューを全開）
unique: true, //動作設定（削除すると自動的に閉じなくなる）
persist: "cookie", //Cookie
});
});
</script>
このような記述をしますが、好みで調節してください。
次は要素のマークアップです。
<ul id="filetree">
<li><span>メニュー名</span>
<ul>
<li>アイテム</li>
</ul>
</li>
<li><span>メニュー名</span>
<ul>
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
</ul>
</li>
</ul>
基本的には<ul>を入れ子にしてマークアップします。
開閉させるメニュー部分に<span>を入れることで、その範囲もヒットエリアとして認識されます。
また、<li class="open">と付加することで最初から開いた状態にすることも出来ます。
CSSの設定はサンプルのコードを参照してください。
スライドというかアコーディオンという感じのスクリプトですね。
CMSなどと組み合わせることでユーザビリティも向上できそうです。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
