幕が上がるようなメニュー/ナビゲーション/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

ナビゲーションメニューmootools.v1.11.js

スポンサードリンク

SAMPLE
CODE
DownLoad

<!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>
<script type="text/javascript" src="mootoolsv111.js"></script> 
<script type="text/javascript" src="buttonflick.js"></script> 

<style> 
* {
  margin:0;
  padding:0; 
}
body {
  background-color:#FFF;
}
#nav {
  list-style:none;
  width:666px;
}
#nav li {
  float:left;
}
#nav a, #nav a .btn {/* メニューの基本的な設定 */
  width:187px;
  height:45px;
  margin-right:1px;
  text-align:center;
  padding-top:11px;
  text-decoration:none;
  font-family:Arial, sans-serif;
  font-weight:bold;
  letter-spacing:-1px;
}
#nav a {/* 最初の状態 */
  background:url(btn.png) no-repeat top left;
  display:block;
  color:#fff;
  font-size:0.9em;
  position:relative;
}
#nav a.active {/* 選択されている状態 */
  cursor:default;
}
#nav .btn {/* オンマウス */
  background:url(btn1.png) no-repeat top left;
  color:#6E6941;
}
</style> 
</head> 
<body> 
<ul id="nav"> 
  <li><a class="active" href="#">Home</a></li> 
  <li><a href="#">About</a></li> 
  <li><a href="#">Current page</a></li> 
</ul> 

</body> 
</html>

	chromasynthetic » Blog Archive » Flash without Flash: Button Flick

オンマウスでまるで幕が上がるように画像がスライドするメニューです。
mootools.v1.11.jsを使用しています。
PNGデータの画像を使用するため、IE6ではちょっと汚い感じになりますが、デザイン上透過部分が必要なければ十分動作するでしょう。

セットアップ

mootoolのダウンロード

１バージョン古いものを使用するため、mootools.v1.11.js へ行きファイルをダウンロードしてきます。
ダウンロードボタンを押したら１０秒後ぐらいにjsファイルへの直リンクが表示されるので、それをクリックしてダウンロードしてください。

<head>の設定

上記のファイルをアップロードしたら、適用させたいページのヘッダーへ読み込ませます。

パスは任意で調節してください。
次に、動作の為のスクリプトを記述します。

#nav li a の箇所でターゲットを指定しています。
それから btn のところでオンマウス時のCSS設定を指定しています。
これをファイルにまとめて読み込ませるか、ヘッダーに直に記述します。

CSSの設定

次はCSSの設定です。
これはサンプルのコードに簡単な説明を書いているので、そちらを参考にしてください。

HTMLコードの設定

コードの記述は簡単です。

<ul id="nav">
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Current page</a></li>
  <li><a href="#">Contact</a></li>
</ul>　

javascriptで指定したIDを付加して通常通りのリストを作ります。
その際、class="active"と付加されたa要素は最初からオンマウス時の画像となります。