横幅640px以下の幅のブラウザで、select風ボタンに見せ方を切り替えます。

• 【Movable Type】横並びカテゴリリンクをウィンドウサイズに％で横幅均等
• 【jQuery】タブ切り替えの際に、上下連動タブ

など、ナビゲーションに当たるタブの横並びを作成してきましたが、
ブラウザサイズの小さいスマホでは横に並び切れる量に制限があるので、横幅640px以下の幅のブラウザではselect風の見せ方に切り替えます。

HTML(Movable Type)

<h3 class="tabButton">○○についてもっと見る</h3>
<ul class="tab top">
	<li>すべて</li><MTSubCategories sort_by="user_custom" category="$categoryTitle"><mt:SetVarBlock name="cat_cnt"><$MTCategoryCount$></mt:SetVarBlock><mt:If name="cat_cnt" ne="0">
	<li><$MTCategoryLabel$></li></mt:If></MTSubCategories>
</ul>
<div class="contents">
	<dl class="content" id="all">
		<dt>すべて</dt>
		<dd>
			「すべて」で表示する内容
		</dd>
	</dl><MTSubCategories sort_by="user_custom" category="$categoryTitle"><mt:SetVarBlock name="cat_cnt"><$MTCategoryCount$></mt:SetVarBlock><mt:If name="cat_cnt" ne="0">
	<dl class="content" id="<$MTCategoryBasename$>">
		<dt><$MTCategoryLabel$></dt>
		<dd>
			「各カテゴリ」で表示する内容
		</dd>
	</dl></mt:If></MTSubCategories>
</div></MTif>

CSS(Movable Type)
jQueryでの動きの基軸になる「.tabButton」をクリック出来る状態にするかしないかを、CSSの「media screen」で制御しています。

<mt:SetVarBlock name="num"><MTsetVar name="count" value="0"><MTSubCategories sort_by="user_custom" category="$categoryTitle"><mt:SetVarBlock name="cat_cnt"><$MTCategoryCount$></mt:SetVarBlock><mt:If name="cat_cnt" ne="0"><MTSetVar name="count" value="1" op="+"><MTSubCatIsLast><mtgetvar name="count"></MTSubCatIsLast></mt:If></MTSubCategories></mt:SetVarBlock><mt:SetVarBlock name="num2"><MTGetVar name="num" value="1" op="+"></mt:SetVarBlock><$mt:SetVar name="variable1" value="100"$><mt:SetVarBlock name="num3"><MTGetVar name="variable1" value="$num2" op="/"></mt:SetVarBlock>
<mt:If name="num2" lt="2">
<style type="text/css">
h3.tabButton {
  display: none !important;
}
@media screen and (max-width: 640px) {
   h3.tabButton {
      display: none !important;
   }
}
ul.tab,
.contents dl {
   display: none;
}
.contents dl#all {
   display: block;
}
</style><MTElse>
<style type="text/css">
#mainArea ul.tab li {
    width: <MTGetVar name="num3">%;
}
@media screen and (max-width: 640px) {
   #mainArea ul.tab li {
      width: 100%;
   }
}</mt:If>
</style>

jQuery

$(function(){
	$(".tabButton").addClass("open");/*開いている時用の矢印アイコンに切り替えるクラスの指定*/
	$(".tabButton").click(function(){
		if($(this).next('ul.tab').css("display")=="block"){
			$(this).next("ul.tab:not(:animated)").slideUp("slow");
			$(this).addClass("open");
			$(this).removeClass("close");/*閉じている時用の矢印アイコンに切り替えるクラスの指定*/
		}
		else{
			$(this).next("ul.tab:not(:animated)").slideDown("slow");
			$(this).addClass("close");
			$(this).removeClass("open");
			$(this).next("ul.tab").children("li").click(function() {
				$(this).parent("ul.tab:not(:animated)").slideUp("slow");
				$(".tabButton").addClass("open");
				$(".tabButton").removeClass("close");
			});
		}
	});
});
$(window).resize(function(){
	var w = $(window).width();
	var x = 641;
	if (w > x) {
		$("ul.tab").css("display","block");
	}
});