Ajax,Javascript、サイト内の移動を効率的にナビゲーションするスクリプトサンプル設置方法
ユーザーメニュー
jquery.navigmenu.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Slider</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.navigmenu.js"></script>
<script type="text/javascript">
$(function(){
$('#menu').navigmenu();
});
</script>
<style type="text/css">
#menu{
position:absolute;
top:0;
left:0;
}
#menu ul{
border:3px double #3399FF;
width:200px;
list-style:disc;
padding:10px 20px;
}
</style>
</head>
<body>
ダブルクリックするとメニューが出現します。
<div id="menu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</div>
</body>
</html>
ページ内でダブルクリックすることにより出現するナビゲーションメニュー。
グローバルメニューのみでは利便性にも原価がありますが、
このようなユーザーサイドのメニューがあればユーザビリティの向上に繋がると思います。
まずjQueryをダウンロードし、次に jquery.navigmenu.js をダウンロードして下さい。
ダウンロード完了したら、それらを適当な場所へアップします。
アップしたスクリプトを読み込ませます。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.navigmenu.js"></script>
次にスクリプトの設定を記述します。
<script type="text/javascript">
$(function(){
$('#menu').navigmenu();
});
</script>
#menu は後でメニューに付加するID名です。
最後にCSSを記述します。
#menu{
position:absolute;
top:0;
left:0;
}
これは基礎となるCSSの記述なので、このあとに子孫セレクタなどで、詳細にレイアウトすると良いと思います。
先に設定したID名を付けたdiv要素を配置し、その内部にメニューをレイアウトすればOKです。
<div id="menu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</div>
他にもイメージマップなどを設置しても面白いと思います。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
