« オークリー 度付サングラス | ランニング »

2005.12.20

月別アーカイブをプルダウンメニュー化する

月別アーカイブデータがずいぶん多くなって、場所を取るようになりましたので、プルダウンメニュー化しました。
参考にしたのは、この本
Movable Type ブログテンプレート&デザインガイド
mt.jpg

まず、テンプレートの月別アーカイブの部分を

<h2>月別アーカイブ</h2>

<script type="text/javascript" src="<$MTBlogURL$>menu.js"></script>

<form id="menu" name="menu">
<select id="menuitem" name="menuitem" onChange="menujs()">
<option value="none">選択して下さい</option>

<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>">
<$MTArchiveTitle$></option>
</MTArchiveList>

</select>
</form>

と言う風に、フォームタグを入れて修正。

次にテンプレートの管理画面から「テンプレートを新規作成」をクリック
テンプレートの名前を付けます。
私は、本の通り「プルダウンメニュースクリプト」としました。
出力ファイル名を「menu.js」と指定、テンプレートの中に、以下のソースを記述

function menujs(){
var URL = document.menu.menuitem.options
[document.menu.menuitem.selectedIndex].value;
if (URL != "none") {
window.location.href = URL
}
}

後は見出しとプルダウンメニューの間隔などを、CSSファイルで指定すればOKです。

※この『Movable Type ブログテンプレート&デザインガイド』は、MTで一からブログを作るのにも、自分の好きなデザインにカスタマイズするのにもすごく参考になる本です。

Comment & Trackback

Trackback are closed.

バックナンバーをプルダウン化

ブログのエントリー数は少ないのに、月別バックナンバーはどんどん溜まっていくもの。…

コメント





XHTML: 利用可能なHTMLタグ:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>