jQuery製クールに開く横型サブナビゲーション

最初にメイン・サブナビゲーションの配置の設定を行います。

	var nav = $('#nav');
	//（メインメニュー）ulをliの合計のwidthにする
	var ulWidth = 0;
	$('>ul>li', nav).each(function (i) {
		ulWidth += $(this).outerWidth(true);
	});
	$('>ul', nav).css('width', ulWidth+'px');
	//サブメニューのwidth取得とUIの設定
	var subWidthArray = new Array();
	$('>ul>li', nav).each(function (i) {
		var tempNum = 0;
		if($('>ul',this).length == 1) {
			$('>ul>li',this).each(function () {
				$(this).css('left', tempNum + 'px');
				tempNum += $(this).outerWidth(true);
			});
			$('>ul',this).css('width', tempNum + 'px');
		} else {
			subWidthArray[i] = 0;
		}
		subWidthArray[i] = tempNum;
	});
		

2～7行目

サブナビゲーションのwidthを一つ一つ取得して、メインナビゲーション全体のwidthに割り当ててます。
ulはブロック要素なのでそのままだと横画面一杯に広がってますので、マウスオーバーしたときにあまりよろしくありません。
ただ、横型のナビゲーションだとボタンを画像にすることが多いので、その場合はcssで指定した方が早いですね。

9～21行目

サブナビゲーションでも同じようにwidthを取得してます。
サブメニューは絶対配置なのでwidthを取得した分だけleftで右にずらします。
（2012.01修正）

その他初期設定とかです。

		//サブナビゲーションに追尾するやつを配置
		nav.append('<div id="navbg"></div>');
		var navbg = $('#navbg');
		//navbgの初期位置
		var homeLeft = nav.position().left;
		//サブナビゲーションがマウスオーバー状態か
		var subNavFlug = false;
		//#navbgの高さをサブナビゲーションと同じにする
		navbg
			.height($('ul li ul li', nav).height())
			.css({
				'top': $('ul li ul', nav).position().top,
				'left': $(nav).position().left
			});
		//サブナビゲーションを非表示
		$('ul ul', nav).css('display', 'none');
		

メインulにマウスオーバーしたら

ここからマウスオーバーの処理です。
メインのulのマウスインの設定はありませんが、アウトしたときかつ「subNavFlug」が「false」のときに初期地点に戻り、横幅を0にします。

		$('ul', nav).hover(
		function() {},
		function() {
			if (subNavFlug == false) {
				navbg.animate({
					'left' : homeLeft,
					'width': 0
				}, 300);
			}
		});
		

メインliにマウスオーバーしたら

サブナビゲーションの開閉はliのマウスオーバーで設定します。

		//メインナビゲーションマウスオーバーでサブナビゲーション開く
		$('>ul>li',nav).hover( function() {
			$('>a',this).addClass('over');
			var currntNum = $(this).index();
			var currentUl = $('ul', this);
			currentUl
				.show()
				.css('opacity', 0);
			//X座標取得
			var posX = $(this).position().left;
			currentUl.css('left', posX);
			//navbgをサブナビゲーションの位置に移動
			if(subWidthArray[currntNum]) {
				navbg.animate({'left' : posX, 'width': subWidthArray[currntNum]}, 300, function(){
					currentUl.css({'opacity': 1});
				});
			} else {
				navbg.animate({'left' : homeLeft, 'width': subWidthArray[currntNum]}, 300);
			}
		},
		function() {
			$('>a',this).removeClass('over');
			$('ul', this).hide();
		});
		

サブナビゲーション（currentUl）はマウスオーバー後すぐに表示（show）すると「#bgnav」がない状態で表示されてしまいますので、すぐに透明度（opacity）を0にしてアニメーション後に透明度を１にします。

サブナビゲーションのマウスオーバーでフラグON

最後にフラグ（subNavFlug）の切り替えを行ってます。

		//サブナビゲーションマウスオーバーでフラグON
		$('>ul>li>ul',nav).hover( function() {
			subNavFlug = true;
		},
		function() {
			subNavFlug = false;
		});