スマートフォンやタブレットで見たときのメニュー表現[1]

レスポンシブでコーディングしているサイトのナビゲーションをスマートフォンで見たとき、どのように処理するかのサンプルです。

サンプル

これは割と単純で、指定の幅になったときにfloatしていたメニューを縦並びに戻しているだけです。

パソコン表示

#menu_button{
	display:none;
	cursor: pointer;
}
#navigation{
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	height: 30px;
	line-height: 30px;
	overflow:hidden;
}
#navigation ul{
  display: block;
}
#navigation ul li{
	list-style:none;
	float:left;
	width:20%;
	text-align:center;
}
#navigation ul li a{
	display: block;
	background: #537EB8;
	color: #FFF;
	text-decoration: none;
	border: 1px solid #FFFFFF;
}
#navigation ul li a:hover{
	filter:alpha(opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
}

スマートフォン表示

#navigation{
	width: auto;
	height: auto;
}
#navigation ul{
	display:none;
}
#navigation ul li{
	float:none;
	width:100%;
	text-align:center;
}

#menu_button{
	display:block;
	text-align: center;
	background-color: #0084FF;
	color: #FFFFFF;
	padding: 5px;
}

ｊQuery

jQuery(document).ready(function(){
  jQuery(document).on('click','#menu_button',function(){
    jQuery("#navigation ul").slideToggle();
  });
});

あとはタップしたときにtoggleで開いたり閉じたりします。