Movable Type 備忘録

 
  

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

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

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

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

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

上記サンプルはちょっとしたコツが必要で、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><!-- header_box -->
</div><!-- header -->
<div id="content">
<div id="content_box">
：
コンテンツ表示
：
</div><!-- content_box -->
</div><!-- content -->
<div id="footer">
<div id="footer_box">
：
フッター表示
：
</div><!-- footer_box -->
</div><!-- footer -->
</div><!-- container -->
<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>

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

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

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

  1. hide_menu.js をダウンロードします。
    こちらのページから dock_menu.zip をダウンロードします。 そして、適当なフォルダに展開してサーバにアップロードしてください。
    アップロード先はどこでも構いません。各自の環境に合わせてアップロードします。

  2. HTML ヘッダ(<head>～</head>)内に以下を追加します。

    <script type="text/javascript" src="<$MTBlogURL$>js/hide_menu.js"></script>

    青い字の部分を各自の環境に合わせて変更してください。

  3. 次にナビゲーションバーを追加します。
    上記構成でいうところの、緑の字の部分にあたります。

    <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>

    これは各自のサイトに合わせてリンク先を変更します。

  4. ナビゲーションバーを表示するためのエリアを追加します。
    上記構成でいうところの青い字の部分にあたります。

    <div id="hit_area" onmouseover="toggleDown();"></div>

    既存の ID タグを流用しても構いません。 その場合には、青い字の部分を追加してあげることで mouseover イベント発生時にナビゲーションバーが表示されるようになります。

    また、上記構成ではページ下にレイアウトしてますが、各自のテンプレートの都合で、お好きな場所に追加しても問題ありません。

  5. 最後にナビゲーションバーを隠すためのエリアを追加します。
    上記構成でいうところの赤い字のエリアになります。

    サンプルでは既存のタグ <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
  • Comments(9)
  • Trackbacks(0)
  

 Trackback Pings(0)

No trackbacks found.

 Comments(9)

#1: Posted by Author Profile Page ゆにっく @ January 2, 2008 [REPLY]
user-pic

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

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

今年もよろしく♪

 
#2: Posted by Author Profile Page matakichi @ January 2, 2008 [REPLY]
user-pic

bzbellさん

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

 
#3: Posted by Author Profile Page bzbell @ January 3, 2008 [REPLY]
user-pic

>>2 matakichi さん

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

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

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

 
#4: Posted by Author Profile Page bzbell @ January 3, 2008 [REPLY]
user-pic

>>1 ゆにっく さん

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

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

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

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

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

 
#5: Posted by 倫子 @ January 4, 2008 [REPLY]
user-pic

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

 
#6: Posted by 倫子 @ January 5, 2008 [REPLY]
user-pic

おぉ！テンプレが一段とカッコよくなってる！
あ、ミスタイプで訂正です(;´▽｀A``
おみくじ、夫婦揃って「小吉」でしたぁ。

 
#7: Posted by Author Profile Page bzbell @ January 5, 2008 [REPLY]
user-pic

>>5 倫子 さん
>>6 倫子 さん

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

> 私は幼い頃からずーっと近所の神社に初詣です。

わたしも今年は近所の神社で済ませたら、思わぬサプライズが!!
暫く会ってなかった幼馴染に会えて嬉しかったです。

> おみくじ、夫婦揃って「小吉」でしたぁ。

わたしは「中吉」でしたぁ!!

> おぉ！テンプレが一段とカッコよくなってる！

ありがとうございます (●´∀｀●)
創作中のテンプレートを表示確認中なんです。

 
#8: Posted by Author Profile Page sinnchan @ January 6, 2008 [REPLY]
user-pic

遅くなりましたが、あけましておめでとうございます。
昨年はテンプレート導入で大変お世話になりました。
今年もよろしくお願いします。

久しぶりにお邪魔したら、テンプレががらりと変わっていて驚きましたよー。このテンプレも使ってみたいので、また公開をよろしくお願いします。

 
#9: Posted by Author Profile Page bzbell @ January 6, 2008 [REPLY]
user-pic

>>8 sinnchan さん

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

> 久しぶりにお邪魔したら、テンプレががらりと変わっていて驚きましたよー。

只今新しいテンプレートの動作確認中なんですよキャハハ
MT 標準の構造はやめて、新しくテンプレート構造作り直しました。

MT 標準のテンプレートだとレイアウトが限定されてしまって独創性にかけるので、思い切って作り直したんですサングラス

> このテンプレも使ってみたいので、また公開をよろしくお願いします。

ありがとうございます。
そぅ言ってもらえると嬉しいですチュ！

 
 

 Post a Comment

 

コメント用フィード