セレクトメニュー（select）でリンク

リンクリストが増えてくると、普通に掲載しているとレイアウトに支障が出てくることもしばしば。

サイドバーにカテゴリーやタグリンク、月別アーカイブ、リンク集…など、ずらずらと並べてしまってメニューが下方に長くなりすぎて、メインコンテンツ部分の下に空白が空いてしまった残念なレアウトのサイトを見かけます。

そんな場合に威力を発揮するのが「セレクトボックス」を使ったリンクメニュー。リストメニューとか、ドロップダウンとかとも言われますが、要するにHTMLタグの『select』です。

ひと昔前の情報では、JavaScriptを利用するため検索エンジン（SEO）的に不利！ともいわれていましたが、最近のGoogleさんは、JavaScriptを読めるように進化しましたので、通常のリンク（a href=""）と何ら変わりなくインデックスしてくれます。

ソースは至って簡単。JavaScriptコード（head内、または外部ファイル化）と、表示したい場所にセレクトメニューを記述するだけ。

<script>
function jumpmenu(el,frm,sel){
var href=el.options[el.selectedIndex].value; if(sel)el.selectedIndex=0;
if('_new'==frm)open(href);
else eval(frm+".location='"+href+"'");
}
</script>

<select onchange="jumpmenu(this,'window',true)">
<option>Menu</option>
<option value="***URL***">タイトル①</option>
<option value="***URL***">タイトル②</option>
<option value="***URL***">タイトル③</option>
<option value="***URL***">タイトル④</option>
<option value="***URL***">タイトル⑤</option>
</select>

	JavaScript
	2019.07.06 07:06
	2019.07.12 07:06

Related entry

Pickup entry

• BACK
• NEXT