Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

ロールアップするナビゲーションバー（tween.js）

Jan022008
Vote:
http://bizcaz.com/archives/2008/01/02-004925.php
Categories: JavaScript
Tags: JavaScript
Social Bookmark

Prev Page: ブラウザのスクロールに連動する RSS アイコン表示
Next Page: shadowbox.js を使ってみる

新年あけましておめでとうござりまする。
本年もよろしくお願いござりまする (m;_ _)m ペコ

今年は明治神宮で参拝せず、近所にある玉川神社で済ませました。
だってチビを連れだっての参拝だったので、ウロチョロされたら困るし、何と言ってもあの人混みはチビたちにはきっついだろうしね（。－ω－）てか、わたしでもきっついのココロ。

さて、2008 年度最初のエントリは、JavaScript を使った Dock Type Navigation をやってみました。
Tween.js という JavaScript を使って、mouseover イベントによるナビゲーションバーの表示／表示を行ったものです。

prototype や jQuery などの JavaScript フレームワークを使用してもできそうですが、とりえあず以下のサンプルページをご覧ください。

Dock Type Navigation サンプル

上記サンプルはちょっとしたコツが必要で、2 つのエリアの mouseover イベントを使って実現しています。
1 つは mouseover によりナビゲーションバーを表示するためのエリアです。
もう 1 つはやっぱり mouseover によるナビゲーションバーを隠すためのエリアです。

具体的に、上記サンプルでは右図のような構成になってます。
<div id="hit_area"> にマウスカーソルが入るとナビゲーションバーが表示されます。そして、<div id="container"> にマウスカーソルが入るとナビゲーションバーが隠れます。

このとき注意することは、<div id="hit_area"> と <div id="container"> はページ横幅いっぱいにしておく必要があります。そうしないと、ある特定のエリアにマウスカーソルが入らないと表示／非表示ができなくなってしまいます。
とはいっても使い方次第ですけどね (￣∇￣)b

ナビゲーションバーの表示／非表示の仕方

上記サンプルは以下のようなテンプレートになってます。

<body>
<div id="container" onmouseover="toggleUp();">
<div id="header">
<div id="header_box">
：
ヘッダー表示
：
</div>
</div>
<div id="content">
<div id="content_box">
：
コンテンツ表示
：
</div>
</div>
<div id="footer">
<div id="footer_box">
：
フッター表示
：
</div>
</div>
</div>
<div id="hit_area" onmouseover="toggleDown();"></div>
<div id="menu_holder">
<div id="nav">
<ul>
<li><a href="http://bizcaz.com/">HOME</a></li>
<li><a href="http://bizcaz.com/archives/">ARCHIVE</a></li>
<li><a href="http://bizcaz.com/archives/tagcloud/">TAGCLOUD</a></li>
<li><a href="http://bizcaz.com/archives/movabletype/plugins/">PLUGIN</a></li>
<li><a href="http://bizcaz.com/archives/blogroll/">BLOGROLL</a></li>
<li><a href="http://bizcaz.com/archives/coreserver/">CORESERVER</a></li>
<li><a href="http://bizcaz.com/archives/mailform/">MAIL</a></li>
</ul>
</div>
</div>
</body>

青い字の部分はナビゲーションバーを表示させるためのエリアになります。
緑の字の部分はナビゲーションバーです。

そして、ナビゲーションバーを隠すエリアが赤い字の部分になります。
上記構成から分かるように、ヘッダー、コンテンツ、フッターを包含してますので、ページ内のどっかにマウスカーソルが入ったら隠れるようになります。

とりあえず、上記構成を元にナビゲーションバーの表示／非表示を説明しますね。

hide_menu.js をダウンロードします。
こちらのページから dock_menu.zip をダウンロードします。そして、適当なフォルダに展開してサーバにアップロードしてください。
アップロード先はどこでも構いません。各自の環境に合わせてアップロードします。
HTML ヘッダ(<head>～</head>)内に以下を追加します。
1. <script type="text/javascript" src="<$MTBlogURL$>js/hide_menu.js"></script>
青い字の部分を各自の環境に合わせて変更してください。
次にナビゲーションバーを追加します。
上記構成でいうところの、緑の字の部分にあたります。
1. <div id="menu_holder">
2. <div id="nav">
3. <ul>
4. <li><a href="http://bizcaz.com/">HOME</a></li>
5. <li><a href="http://bizcaz.com/archives/">ARCHIVE</a></li>
6. <li><a href="http://bizcaz.com/archives/tagcloud/">TAGCLOUD</a></li>
7. <li><a href="http://bizcaz.com/archives/movabletype/plugins/">PLUGIN</a></li>
8. <li><a href="http://bizcaz.com/archives/blogroll/">BLOGROLL</a></li>
9. <li><a href="http://bizcaz.com/archives/coreserver/">CORESERVER</a></li>
10. <li><a href="http://bizcaz.com/archives/mailform/">MAIL</a></li>
11. </ul>
12. </div>
13. </div>
14. </body>
これは各自のサイトに合わせてリンク先を変更します。
ナビゲーションバーを表示するためのエリアを追加します。
上記構成でいうところの青い字の部分にあたります。
1. <div id="hit_area" onmouseover="toggleDown();"></div>
既存の ID タグを流用しても構いません。その場合には、青い字の部分を追加してあげることで mouseover イベント発生時にナビゲーションバーが表示されるようになります。

また、上記構成ではページ下にレイアウトしてますが、各自のテンプレートの都合で、お好きな場所に追加しても問題ありません。
最後にナビゲーションバーを隠すためのエリアを追加します。
上記構成でいうところの赤い字のエリアになります。

サンプルでは既存のタグ <div id="container"> タグに onmouseover="toggleUp();" を追加しました。

以上でテンプレートの修正は完了です。
今度はスタイルシートになります。

要点を絞って上記サンプルのスタイルシートを以下に記します。

#container {
margin-top: 32px; /*★ナビゲーションバー高さと同じ*/
width: 100%; /*★ページ横幅フルに指定*/
}
#menu_holder {
width: 100%; /*★サンプルではページ横幅フルに指定*/
height: 32px; /*★ナビゲーションバー高さ*/
position: absolute; /*★絶対配置指定*/
top: -32px; /*★ナビゲーションバー高さ分マイナス指定*/
left: 0; /*★ページ右上に固定配置*/
}
#nav {
margin: 0 auto; /*★ナビゲーションバーをセンタリング*/
width: 714px; /*★(アイテム幅(100px)＋ボーダー幅(2px))×アイテム個数(7)*/
height: 32px; /*★アイテム高さ(32px)と同サイズ*/
}
#nav ul {
height: 32px; /*★アイテム高さ(32px)と同サイズ*/
}
#nav li a:link,
#nav li a:active,
#nav li a:visited {
height: 32px; /*★アイテム高さ*/
width: 100px; /*★アイテム幅*/
display: block;
line-height: 32px; /*★アイテム高さ(32px)と同サイズ*/
}
#hit_area {
width: 100%; /*★重要マウスオーバーによるドックメニュー表示エリア指定*/
height: 96px; /*★重要マウスオーバーによるドックメニュー表示エリア指定*/
/*　ナビゲーションバー高さ(32px)×3*/
position: absolute; /*★絶対配置指定*/
top: 0; /*★ページ左上にレイアウト*/
left: 0; /*★ページ左上にレイアウト*/
}

ざっくりですが、サンプルのような表示をする場合の重要な部分を抜き出しています。
もし、上記サンプルページのテンプレート & スタイルシートが欲しい人がいましたらご連絡ください (￣∇￣)/

では、いつものように長くなってしまいましたが、今年もよろしくお願いのココロ。

Edit
Permalink
9 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(9)

#1: Posted by ゆにっく @ January 2, 2008 [REPLY]

明けましておめでとうございますこちらは元旦からMovable Type漬けです。新しくブログを立ち上げることになって、それをMT4で管理することになって昨日はMT4をいじってました。まだβ版やけど特に違和感はなく使えますね

bzbellさんも今年MT4入れると思いますがまたそれ関係のネタを書く時はまたそれで勉強させてもらいますね

今年もよろしく♪

#2: Posted by matakichi @ January 2, 2008 [REPLY]

bzbellさん

あけましておめでとうございます。
旧年中はテンプレート設置に関して、的確なアドバイスをありがとうございました
今年もこちらのブログを参考に、様々なカスタマイズを行っていきたいと思っています。
今年もよろしくお願いいたします！！

#3: Posted by bzbell @ January 3, 2008 [REPLY]

>>2 matakichi さん

明けましておめでとうございます。
本年もよろしくお願い致します

> 旧年中はテンプレート設置に関して、的確なアドバイスをありがとうございました今年もこちらのブログを参考に、様々なカスタマイズを行っていきたいと思っています

いぃえぇ、ぜんぜん問題ないです
至らないとこは多々あると思いますが、その際にはご指摘お願いしますね。
今年も自分のペースでのんびり、またぁ～りいきましょ

#4: Posted by bzbell @ January 3, 2008 [REPLY]

>>1 ゆにっくさん

明けましておめでとうございます。
本年もよろしくお願い致します

> 新しくブログを立ち上げることになって、それをMT4で管理することになって昨日はMT4をいじってました。

おぉ!! 新ブログ立ち上げですか!?
出来上がったら見せてください

> bzbellさんも今年MT4入れると思いますがまたそれ関係のネタを書く時はまたそれで勉強させてもらいますね

わたしはもぅ MT4 には移行済みですよ
今度リリースされる MT4.1 では CustomField プラグインが標準になるので、そちら待ちでしょうか

#5: Posted by 倫子 @ January 4, 2008 [REPLY]: bzbellさん、あけましておめでとうございます
今年もどうぞよろしくお願いします！
ご挨拶が大変遅くなって申し訳ないです
ブログ、日々進化していますねぇｗ
にゃんこの絵文字、とってもかわいいですよ
私は幼い頃からずーっと近所の神社に初詣です。
有名所よりも近所の方が縁もゆかりもあるんだろうし
正月早々大混雑にもまれる根性が全くないので
それでも９日には義母の付き添いで成田山に行きますが…
平日だから少しはマシかなぁ。。。なんて。
近所の神社ではおみくじが中吉だったけど、
成田山でもまた引いてきちゃおうと思ってます