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についてはボタンの装飾などあると思うので
その都度、変更が必要になります。

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

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

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR