MenuMaticの設置はCSSがキモです。

ある案件の制作も佳境に入り、「今夜はたむらぱん（僕の子分）徹夜かぁ。」と、ほんのちょっとだけ不憫に思い、「なんか手伝おうか？」なんてひまそーに声を掛けたのが運の尽きでした（笑）

そんなわけで、「これを組み込みたいんですけど」と言いつつ見せられたのがアニメーション付きドロップダウンメニュースクリプトのMenuMatic。

サンプルページを見ると小気味よいスクロールでメニューが「うにょ～ん」と出てくる。しかも縦横どっちもいける。

「あ～、これはいいね～」
なんて、ひまそーに言ってしまったのが運の尽きでした（笑）

冒頭で述べたとおり、「制作も佳境」だったので、”サイトがほぼ出来ている状態での実装”なわけです。
いま考えてみると、最後にこいつを実装っていう手順自体、たむらぱんに問題がある気がしますが、まぁウチの制作方式は結構な割合で”完全個人裁量型フリーダム進行”なケースが多いので、後になって「やべー。」とか、「やっちまったー。」とか冷や汗をかくシーンに遭遇します。というか、そういう冷や汗をかいた分だけ、スキルが上がったりするんですけれども。

嗚呼、ごめんなさい、話が逸れました。MenuMaticの設置方法だ。

ようするに既にばっちり（？）CSSでレイアウトが組み終わっているサイトのメインナビゲーションにMenuMaticを組み込むのが今回のミッション。

まずはダウンロードだわな

サイトからファイルをダウンロードします。
解凍するとjsファイルが2個にサンプルフォルダが出てきます。jsファイルは華麗にスルーして、examplesフォルダの内容をお手本に作業を進めます。

ファイルを設置するべさ

なんで見出しが訛ってるのか分かりませんが、とにかくファイルを置いてみるのです。

examplesフォルダのファイルをとりあえずそのまんま置いちゃいます。
既にフォルダ構成は決まっているのでそれに従いMenuMatic_0.68.3.jsを/common/js/に。
MenuMatic.cssを/common/css/に。
今回、矢印は必要なかったので、画像ファイルは無視。

HTMLから呼び出してみるっぺ

いよいよ実装です。サンプルのソースをコピペします。コピペする部分はHTMLソース後半のここ

<!-- Load the Mootools Framework -->
<script src="http://www.google.com/jsapi"></script><script>google.load("mootools", "1.2.1");</script>	

<!-- Load the MenuMatic Class -->
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>

<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
	window.addEvent('domready', function() {
		var myMenu = new MenuMatic();
	});
</script>

これを同じようにbodyタグを閉じる直前に入れてみます。

コードを見てまず気付くのがMootoolsの呼び出し部分。
今回初めて知ったのですが、googleが各種javascriptライブラリをgoogle.loadで取れるようにしているんですね。（解説はこことか）
一瞬、「あれ、Mootoolsってgoogleが作ってるんだっけ？」なんて思ってしまいました。

そして次にMenuMaticの読み込み、そして最後にMenuMaticクラスの初期化となっています。

あと、忘れちゃいけないのがCSSの読み込み。これはヘッダで普通に読み込み。
＜link rel="stylesheet" href="common/css/MenuMatic.css" type="text/css" media="screen" charset="utf-8" /＞

ちなみに、サンプルではIE6用にCSSを分けてHTML側で分岐させています。これは例のIE6における数々のバグを回避するための対応なのですが、今回はとてもシンプルなメニューで良かったので入れなくても大丈夫でした。
第3階層まである場合や画像・ボーダー等をきっちり見せる必要がある場合は分岐させないと難しいでしょう。

メヌーのHTMLはこう書け！

なぜ命令口調？

メニューをぬるっと表示する部分のHTMLはこのように書きます。ポイントはメニューをリストタグで書くのと、リストの親玉にid="nav"を指定すること。（※id名navはオプションで変更可能）
こんな感じです。

<ul id="nav">
	<li><a href="hoge1.html">ほげ1</a></li>
	<li><a href="hoge2.html">ほげ2</a>
		<ul>
			<li><a href="hoge2-0.html">ほげ2.0</a></li>
			<li><a href="hoge2-1.html">ほげ2.1</a></li>
			<li><a href="hoge2-2.html">ほげ2.2</a></li>
		</ul>
	</li>
	<li><a href="hoge2.html">ほげ3</a></li>
	<li><a href="hoge2.html">ほげ4</a></li>
</ul>

はい、これで設置完了。「ぐへへ、余裕じゃん」なんつってブラウザで表示させたら・・・。

表示が思いっきり崩れたぜ（あたりまえ）

サンプルのcssそのまんま入れてますからね。そりゃおかしくなりますわな。既に組んであるグローバルナビゲーションのスタイルに浸食するようにして、メニュー自体が明後日の方にすっ飛んでいます。

つきましては修正を・・・って、「どこをどう直すんじゃい！」
さっぱりわからん。

と、いうことで、インターネット先生に聞いてみようってことになるのですが、なんか、こう、
「クールなメニューが簡単に実装できるみたい。」とか、
「こんな感じで簡単に実装できます。」とかで本家のサンプルのまんまコピな記事しか見つからず、僕はふと思いました。

タダで何でも手に入ると思っちゃいかんね。自分で努力せんと。

そんなわけで自力で何とかすべく、MenuMatic.cssの解読を試みました。
何しろ僕はActionscriptこそ多少分かるものの、javascriptに関しては全くの素人（まぁ言語としてはほぼ一緒らしいけれども）なので、jsを解析することは出来ない。よって見られるのはCSSだけ。

適当にアタリを付けて不要なスタイル定義をガンガン削っていきます。
そうやってたどり着いたのがこんなCSS。

#subMenusContainer a {
	text-decoration:none;
	display:block;
	padding:5px 10px;
	color:#FFFFFF;
	background-color:#1F6991;
}
#subMenusContainer a,
#nav li li a { text-align:left; }
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused {
	background-color:#F6C739;
	color:#FFF;
}
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused {
	background-color:#337DA5;
	color:#FFF;
}
.smOW {
	display:none;
	position: absolute;
	overflow:hidden;
	padding:0 2px;
	margin:0 0 0 -2px;
}
#subMenusContainer ul,
#subMenusContainer ol {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}
#subMenusContainer ul,
#subMenusContainer ol { left:0; }
#subMenusContainer li {
	list-style: none;
	padding-bottom:2px;
}
#subMenusContainer {
	display:block;
	position:absolute;
	top:-7px;
	left:0;
	width:100%;
	height:0;
	overflow:visible;
	z-index:1000000000;
}
#nav li li {
	float:none;
	background-color:#337DA5;
}
#nav li li a {
	position:relative;
	float:none;
}
#nav li ul {
	position: absolute;
	width: 10em;
	margin-left: -1000em;
	margin-top:2.2em;
}
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }
#nav li:hover ul { margin-left: 0; }
#nav li li:hover ul {
	margin-left: 10em;
	margin-top:-2.5em;
}
#nav li a:focus + ul {
	margin-left: 0;
	margin-top:2.2em;
}
#nav li li a:focus + ul {
	left:0;
	margin-left: 1010em;
	margin-top:-2.2em;
}
#nav li li a:focus {
	left:0;
	margin-left:1000em;
	width:10em;
	margin-top:0;
}
#nav li li li a:focus {
	left:0;
	margin-left: 2010em;
	width: 10em;
	margin-top:-1em;
}
#nav li:hover a:focus { margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }

これでなんとかやりたいことは実現できました。ただ、第3階層がどうなるかとかまでは確認してません。皆さん是非これを踏み台にして自力で頑張ってください。

追記：テスト画面つくりました。一応それなりに動いているみたい。

さて、無事実装できたし帰ろっかな。などと思った矢先に・・・

ここにも落とし穴が。
てか、基本的に落とし穴だらけです（ウチの制作部隊）。むしろ僕なんか落とし穴に入るのが仕事何じゃないかと時々思います(；´Д｀)

んで、何が起きたのかと言いますとですね、実はこのサイト、既にLightboxが組み込まれているページがあったんですね・・・。

これによって何が起きたかというのはまた次の機会に・・・。

ということで、今夜はここまで。
次回をお楽しみに（？）

UNISON SQUARE GARDEN － UNISON SQUARE GARDEN

just A moment －凛として時雨

軌道－WARPHOLL

衝撃の展開に思わず笑みがこぼれる一品 "Stick Stickly" Attack Attack!

On Fire－The Higher

SO MANY MUSIC,SO MANY COLORS － Looking For

NIGHT FISHING －サカナクション

Music is the key－UNCHAIN

air feel,color swim - school food punishment

ALBO─Mistral