アーカイブメニューをプルダウン化

| コメント(1) | トラックバック(0)

記事が増えてくるとアーカイブメニューが縦に長くなって鬱陶しくなってきます。
そこで、
hwp blog: プルダウンメニュー
を参考に月別、カテゴリ別のアーカイブメニューをプルダウンメニューにしました。

インデックステンプレートの中身で、アーカイブメニューに関する部分を、

<h2>アーカイブ</h2>
<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu('parent',this,0)">
<option value="<MTBlogURL>" selected> 月別</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"> <$MTArchiveTitle$></option></MTArchiveList>
<option value="archives.html"> 記事一覧</option>
</select>
</form>
<form name="pulldown_category">
<select name="menu" onChange="MM_jumpMenu('parent',this,0)">
<option value="<MTBlogURL>" selected> カテゴリー別</option>
<MTCategories show_empty="1">
<option value="<$MTCategoryArchiveLink$>"> <$MTCategoryLabel$> (<$MTCategoryCount$>)</option>
</MTCategories>
</select>
</form>
のように書き換えます。
次に、インデックステンプレートのヘッダ部分に以下のスクリプトを仕込みます。
<script language="javascript" type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
最後に、スタイルシートに、
form {
margin:0px;
}

select {
width:100%;
font-size: x-small;
}

を追加して出来上がりです。

トラックバック(0)

トラックバックURL: https://horijp.com/mt/mt-tb.cgi/53

コメント(1)

コメントする

ウェブページ

Powered by Movable Type 7.8.2

このブログ記事について

このページは、masashiが2005年3月20日 19:50に書いたブログ記事です。

ひとつ前のブログ記事は「もうすぐ愛知万博」です。

次のブログ記事は「メールアドレスの変更をひたすらに・・・」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。