jQueryでiPhone & iPadスライド型ナビゲーションメニューUIをつくってみる。

2010/07/12 TAGS :iPhone, jQuery

iPhone & iPadのナビゲーションとして使用されている、メニューリストをクリックすると、
スライドして次のリストが現れるメニューUI。

Webサイト上でもこれを使って、メニューを構成するのもおもしろいかと思い、
jQueryで実験的につくってみました。

まずはサンプルから。

リスト内の「▲（右向き）」が付いているものをクリックすると、次のリスト一覧がスライドして現れます。
スライド後は前のリストに戻るための「≪ BACK」を配置。

このサンプルのHTMLソースは以下のような記述。

◆HTML
<div id="ip_menu">

<ul id="parent">
<li><a href="#">≫CONTENTS 01</a>
	<ul>
	<li><a href="#">≫SECOND CONTENTS 01</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a>
			<ul>
			<li><a href="#">≫FORTH CONTENTS 01</a>
				<ul>
				<li><a href="#">≫FIVE CONTENTS 01</a></li>
				<li><a href="#">≫FIVE CONTENTS 02</a></li>
				<li><a href="#">≫FIVE CONTENTS 03</a></li>
				<li><a href="#">≫FIVE CONTENTS 04</a></li>
				<li><a href="#">≫FIVE CONTENTS 05</a></li>
				</ul>
			</li>
			<li><a href="#">≫FORTH CONTENTS 02</a>
				<ul>
				<li><a href="#">≫FIVE CONTENTS 01</a></li>
				<li><a href="#">≫FIVE CONTENTS 02</a></li>
				</ul>
			</li>
			<li><a href="#">≫FORTH CONTENTS 03</a></li>
			<li><a href="#">≫FORTH CONTENTS 04</a></li>
			</ul>
		</li>
		<li><a href="#">≫THIRD CONTENTS 02</a>
			<ul>
			<li><a href="#">≫FORTH CONTENTS 01</a></li>
			<li><a href="#">≫FORTH CONTENTS 02</a></li>
			<li><a href="#">≫FORTH CONTENTS 03</a></li>
			</ul>
		</li>
		<li><a href="#">≫THIRD CONTENTS 03</a>
			<ul>
			<li><a href="#">≫FORTH CONTENTS 01</a></li>
			<li><a href="#">≫FORTH CONTENTS 02</a></li>
			</ul>
		</li>
		<li><a href="#">≫THIRD CONTENTS 04</a>
			<ul>
			<li><a href="#">≫FORTH CONTENTS 01</a></li>
			</ul>
		</li>
		</ul>
	</li>
	<li><a href="#">≫SECOND CONTENTS 02</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a></li>
		<li><a href="#">≫THIRD CONTENTS 02</a></li>
		<li><a href="#">≫THIRD CONTENTS 03</a></li>
		</ul>
	</li>
	<li><a href="#">≫SECOND CONTENTS 03</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a></li>
		<li><a href="#">≫THIRD CONTENTS 02</a></li>
		</ul>
	</li>
	</ul>
</li>
<li><a href="#">≫CONTENTS 02</a>
	<ul>
	<li><a href="#">≫SECOND CONTENTS 01</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a></li>
		<li><a href="#">≫THIRD CONTENTS 02</a></li>
		<li><a href="#">≫THIRD CONTENTS 03</a></li>
		<li><a href="#">≫THIRD CONTENTS 04</a></li>
		<li><a href="#">≫THIRD CONTENTS 05</a></li>
		<li><a href="#">≫THIRD CONTENTS 06</a></li>
		<li><a href="#">≫THIRD CONTENTS 07</a></li>
		<li><a href="#">≫THIRD CONTENTS 08</a></li>
		<li><a href="#">≫THIRD CONTENTS 09</a></li>
		<li><a href="#">≫THIRD CONTENTS 10</a></li>
		</ul>
	</li>
	<li><a href="#">≫SECOND CONTENTS 02</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a></li>
		<li><a href="#">≫THIRD CONTENTS 02</a></li>
		</ul>
	</li>
	<li><a href="#">≫SECOND CONTENTS 03</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a></li>
		<li><a href="#">≫THIRD CONTENTS 02</a></li>
		<li><a href="#">≫THIRD CONTENTS 03</a></li>
		</ul>
	</li>
	<li><a href="#">≫SECOND CONTENTS 04</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a></li>
		<li><a href="#">≫THIRD CONTENTS 02</a></li>
		<li><a href="#">≫THIRD CONTENTS 03</a></li>
		<li><a href="#">≫THIRD CONTENTS 04</a></li>
		</ul>
	</li>
	<li><a href="#">≫SECOND CONTENTS 05</a></li>
	<li><a href="#">≫SECOND CONTENTS 06</a></li>
	<li><a href="#">≫SECOND CONTENTS 07</a></li>
	<li><a href="#">≫SECOND CONTENTS 08</a></li>
	</ul>
</li>
<li><a href="#">≫CONTENTS 03</a>
	<ul>
	<li><a href="#">≫SECOND CONTENTS 01</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a></li>
		<li><a href="#">≫THIRD CONTENTS 02</a></li>
		<li><a href="#">≫THIRD CONTENTS 03</a></li>
		<li><a href="#">≫THIRD CONTENTS 04</a></li>
		</ul>
	</li>
	<li><a href="#">≫SECOND CONTENTS 02</a>
		<ul>
		<li><a href="#">≫THIRD CONTENTS 01</a></li>
		<li><a href="#">≫THIRD CONTENTS 02</a></li>
		<li><a href="#">≫THIRD CONTENTS 03</a></li>
		<li><a href="#">≫THIRD CONTENTS 04</a></li>
		</ul>
	</li>
	<li><a href="#">≫SECOND CONTENTS 03</a></li>
	<li><a href="#">≫SECOND CONTENTS 04</a></li>
	</ul>
</li>
<li><a href="#">≫CONTENTS 04</a>
	<ul>
	<li><a href="#">≫SECOND CONTENTS 01</a></li>
	<li><a href="#">≫SECOND CONTENTS 02</a></li>
	<li><a href="#">≫SECOND CONTENTS 03</a></li>
	<li><a href="#">≫SECOND CONTENTS 04</a></li>
	</ul>
</li>
<li><a href="#">≫CONTENTS 05</a></li>
</ul>

</div><!--/ip_menu-->

無駄に長くなっていますが、HTML側は基本的にリストの入れ子にするのみです。
上に書いた「▲（右向き）」や「≪ BACK」ボタンはリストが入れ子になることで自動で付加されます。

全体を囲う<div>及び<ul>のIDの名前は任意ですが、
SCRIPT側で使用するので、変更する際はSCRIPTの変更も必要になります。

そしてSCRIPTの記述は以下のように。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#ip_menu ul li ul').hide();

	$('li:has(ul) > a').each(function(){
		$(this).append('<span>►</span>');
		$(this).parent('li').children('ul').prepend('<li><a href="javascript:void(0);" class="ip_back">≪ BACK</a></li>');
	});

	var areaWidth = 300;
	var areaHeight = 300;

	$('#ip_menu').css({width:(areaWidth + 20) + 'px',height:(areaHeight) + 'px'});
	$('#ip_menu ul li,#ip_menu ul li a').css({width:(areaWidth) + 'px'});

	$('li:has(ul) > a').click(function(){
		$(this).parents('li').animate({width: '+=' + (areaWidth) + 'px'},0);
		$('ul#parent').animate({marginLeft: '-=' + (areaWidth) + 'px'},300);
		$(this).parent('li').children('ul').fadeIn('normal');
		$(this).parent('li').prevAll().css({display:'none'});
		$(this).parent('li').nextAll().css({display:'none'});
	});

	$('a.ip_back').click(function(){
		$(this).parents('li').animate({width: '-=' + (areaWidth) + 'px'},0);
		$('ul#parent').animate({marginLeft: '+=' + (areaWidth) + 'px'},300);
		$(this).parent('li').parent('ul').css({display: 'none'});
		$(this).parent('li').parent('ul').parent('li').prevAll('li').fadeIn('normal');
		$(this).parent('li').parent('ul').parent('li').nextAll('li').fadeIn('normal');
	});
});
</script>

まず入れ子になっている<ul>を非表示にすると同時に、
「▲（右向き）」や「≪ BACK」ボタンを付加しておきます。

その下の
———————————–
var areaWidth = 300;
var areaHeight = 300;
———————————–
の値はメニューリストの枠の大きさになり、
areaWidth（幅）はリストボタンの大きさに比例しています。
このサンプルでは幅300px高さ300pxの枠内でスライドメニューを展開、
高さが300px以上になったらスクロールバーを出しています。
ここの値を変更することでメニューボタンの大きさを変更することが可能になっています。

入れ子になっているメニューボタンがクリックされると、
非表示にしていた子要素<ul>を表示に切り替え、親リストをareaWidth分左にスライドさせています。
（「≪ BACK」ボタンクリック後はその逆の動作。）

こんな感じのSCRIPTでiPhoneメニューUIをWebサイト上に実装することが可能になります。

上記サンプルではメニューリストの高さを固定にしてスクロールバーを表示させていますが、
ここを高さ固定にせずに、表示される<ul>の高さをそのまま生かす場合は、
以下のようなSCRIPTになります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#ip_menu ul li ul').hide();

	$('li:has(ul) > a').each(function(){
		$(this).append('<span>►</span>');
		$(this).parent('li').children('ul').prepend('<li><a href="javascript:void(0);" class="ip_back">≪ BACK</a></li>');
	});

	var areaWidth = 300;
	var areaHeight = $('ul#parent').height();

	$('#ip_menu').css({width:(areaWidth + 20) + 'px',height:(areaHeight) + 'px'});
	$('#ip_menu ul li,#ip_menu ul li a').css({width:(areaWidth) + 'px'});

	$('li:has(ul) > a').click(function(){
		$(this).parents('li').animate({width: '+=' + (areaWidth) + 'px'},0);
		$('ul#parent').animate({marginLeft: '-=' + (areaWidth) + 'px'},300);
		$(this).parent('li').children('ul').fadeIn('normal');
		$(this).parent('li').prevAll().css({display:'none'});
		$(this).parent('li').nextAll().css({display:'none'});

		var areaHeight = $('ul#parent').height();
		$('#ip_menu').css({height:(areaHeight) + 'px'});
	});

	$('a.ip_back').click(function(){
		$(this).parents('li').animate({width: '-=' + (areaWidth) + 'px'},0);
		$('ul#parent').animate({marginLeft: '+=' + (areaWidth) + 'px'},300);
		$(this).parent('li').parent('ul').css({display: 'none'});
		$(this).parent('li').parent('ul').parent('li').prevAll('li').fadeIn('normal');
		$(this).parent('li').parent('ul').parent('li').nextAll('li').fadeIn('normal');

		var areaHeight = $('ul#parent').height();
		$('#ip_menu').css({height:(areaHeight) + 'px'});
	});
});
</script>

基本的な動作は同じですが、
———————————–
var areaWidth = 300;
var areaHeight = $(‘ul#parent’).height();
———————————–
高さを親リストの値をみるようにします。

リストボタンクリック毎に
———————————–
var areaHeight = $(‘ul#parent’).height();
$(‘#ip_menu’).css({height:(areaHeight) + ‘px’});
———————————–
を実行させて、親リストの高さを毎回を変更します。

HTMLソースについては変更なしです。

≫スクロールバーを出さないパターンのサンプルはこちら

ちなみに上記2パターンのCSSは以下のように記述しています。

◆CSS
body {
	font-size: 100%;
	line-height: 140%;
	font-family: Arial,Helvetica,sans-serif;
	background: #fff;
}

a:link { text-decoration:none; color: #333;}
a:visited { text-decoration:none; color: #333;}
a:active { text-decoration:none; color: #333;}
a:hover { text-decoration:none; color: #333;background: #ddd;}

#ip_menu {
	padding-bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}

#ip_menu ul {
	width: auto;
	float: left;
	overflow: hidden;
}

#ip_menu ul li {
	width: auto;
	display: block;
	vertical-align: text-bottom;
}

#ip_menu ul li a {
	padding: 15px 0;
	text-indent: 10px;
	display: block;
	float: left;
	position: relative;
	background: transparent url(../img/list_rb.jpg) repeat-y top right;
	border-bottom: #333 1px solid;
}

#ip_menu ul li a:hover {
	background: #f1f1f1 url(../img/list_rb.jpg) repeat-y top right;
}

#ip_menu ul li a span {
	right: 10px;
	position: absolute;
}

#ip_menu a.ip_back {
	color: #fff;
	font-weight: bold;
	background: #333;
}

#ip_menu a.ip_back:hover {
	background: #333 url(../img/list_rb.jpg) repeat-y top right;
}

#ip_menu ul li ul {
	display: none;
}

#ip_menu ul li:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}
#ip_menu ul {
	display: inline-block;
}

CSSについてはボタンの装飾などあると思うので
その都度、変更が必要になります。

上記２パターンのサンプルは
いちよIE6、7とかでも正常に動作します。

メニューエリアの幅をブラウザのウィンドウに合わせて、めいっぱいにすることで、
iPhoneサイト用のSCRIPTとしても使えるハズ。
（まだそのサンプルは作っていませんが。。。）

まだまだ改善すべきところはある気もしますが、
Webサイト上にiPhoneメニューUIを実装する際などに是非。。。

上記サンプルのデータをダウンロードしたい場合はこちらから
≫jQuery_iPhoneMenuUI.zip
あくまで実験段階のものなので、ライセンスとか特に何もありません。