下準備として、それぞれのリスト(独自タグ)にidをつけるようにします。ツリー化ですでにidを付けているものは特に必要ありません。念のためツリー化で触れた独自タグも含めて記述します。

• ページエントリーリスト：<div id="entrylist">{selected_entry_list}</div>
• 最新エントリーリスト：<div id="newentrylist">{latest_entry_list}</div>
• 最新コメントリスト：<div id="commentlist">{recent_comment_list}</div>
• 最新トラックバックリスト：<div id="tblist">{recent_trackback_list}</div>
• リンクリスト：<div id="linklist">{link_list}</div>
• カテゴリーリスト：<div id="categorylist">{category_list}</div>
• アーカイブリスト：<div id="archivelist">{archives_list}</div>
• ユーザーリスト：<div id="profilelist">{user_list}</div>

それぞれのidがポイントになりますので、以下に記述します。

• ページエントリーリスト：entrylist
• 最新エントリーリスト：newentrylist
• 最新コメントリスト：commentlist
• 最新トラックバックリスト：tblist
• リンクリスト：linklist
• カテゴリーリスト：categorylist
• アーカイブリスト：archivelist
• ユーザーリスト：profilelist

ちなみにこのidは後日触れようと思っている「ナビゲーション折り畳み」でも同様に利用されます。

続いて、実際にプルダウンメニュー化を行うスクリプトを記述します。</body>の直前(つまり、htmlテンプレートの最後の方になります)に以下のようなJavaScriptを挿入します。

<script type="text/javascript">
<!--
ListSelector('archivelist',1,'月別アーカイブ'); /* アーカイブリストをプルダウン化 */
function ListSelector(idName,checkNum,selText) {
  if (!selText) selText = '移動先を選択';
  var objFocus = this.document.getElementById(idName);
  if (!objFocus) return;
  var objLists = objFocus.getElementsByTagName('li');
  if (objLists.length < checkNum) return;
  var outText = new Array();
  outText[outText.length] = '<form class="listselector" action="#">';
  outText[outText.length] = '<select onchange="window.location.href = this.value">';
  outText[outText.length] = '<option value="">';
  outText[outText.length] = selText;
  outText[outText.length] = '</option>';
  for (i=0;i<objLists.length;i++) {
    var oAnchor = objLists[i].getElementsByTagName('a');
    var txtLink = oAnchor[0].getAttribute('href');
    var txtElem = oAnchor[0].firstChild.nodeValue;
    outText[outText.length] = '<option value="';
    outText[outText.length] = txtLink;
    outText[outText.length] = '">';
    outText[outText.length] = txtElem;
    outText[outText.length] = '</option>¥n';
  }
  outText[outText.length] = '</select></form>¥n';
  objFocus.innerHTML = outText.join('');
}
// -->
</script>

ここではアーカイブリストだけをプルダウンメニュー化しています。

プルダウンメニュー化を行うリストの指定は

ListSelector('archivelist',1,'月別アーカイブ'); /* アーカイブリストをプルダウン化 */

で行っています。

ListSelector('id',数字,'メニュー初期文句');

となります。

「id」は上記で述べたリストのidになります。例えば、カテゴリーリストをプルダウンメニュー化したければ、「categorylist」と記述します。

「数字」はプルダウンメニュー化を開始する項目数です。ここを「1」と設定すれば、リストの項目が1個以上あればプルダウンメニュー化します(つまり、1の場合常時プルダウンメニュー化します)。「5」と設定するとリストの項目が5個以上の場合にプルダウンメニュー化します。

「メニュー初期文句」はプルダウンメニューの一番先頭のメニュー内容になります。とくに設定する必要がなければ「''」と空にしてください。自動的に「移動先を選択」になります。

上記のスクリプトではアーカイブリストだけをプルダウンメニュー化するようになっていましたが、複数のリストを同時に設定することも可能です。例えば、

ListSelector('archivelist',1,'月別アーカイブ'); /* アーカイブリストをプルダウン化 */
ListSelector('categorylist',1,'カテゴリー'); /* カテゴリーリストをプルダウン化 */

のようになるわけです。

ツリー化に比べると若干設置方法が複雑に感じるかもしれません(ナビゲーション折り畳みスクリプトはもう少し複雑になります)。

また、プルダウンメニューは

<form class="listselector">

というクラスで書き出されます。従ってスタイルシートの方では

form.listselector { /* プルダウンメニューフォーム */
}
form.listselector select { /* プルダウンメニュー中身 */
}

という記述でスタイルを指定できます。ちなみに当ブログでは

form.listselector {
  margin: 0px;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  color: #889;
  border-bottom: 1px solid #bbc;
  background-color: #e5e5f5;
}

というスタイルを記述しています。

何か分からないことなどありましたら、遠慮なく質問してください(全てに応えられるかどうかは分かりませんが)。

[追記] Border.さんからご要望のあった機能に対応しました。

function ListSelector(idName,checkNum,selText) {
  if (!selText) selText = '移動先を選択';
  var listWidth = '170px';
  var objFocus = this.document.getElementById(idName);
  if (!objFocus || !objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('li');
  if (objLists.length < checkNum) return;
  var outText = new Array();
  outText[outText.length] = '<form class="listselector" action="#">';
  outText[outText.length] = Array('<select onchange="window.location.href = this.value" style="width:',listWidth,'">').join('');
  outText[outText.length] = '<option value="">';
  outText[outText.length] = selText;
  outText[outText.length] = '</option>';
  for (i=0;i<objLists.length;i++) {
    var elemNum = objLists[i].innerHTML;
    if ( elemNum.match(/¥((¥d*)¥)/) ) {
      elemNum = RegExp.$1;
    } else {
      elemNum = '';
    }
    var oAnchor = objLists[i].getElementsByTagName('a');
    var txtLink = oAnchor[0].getAttribute('href');
    var txtElem = oAnchor[0].firstChild.nodeValue;
    outText[outText.length] = '<option value="';
    outText[outText.length] = txtLink;
    outText[outText.length] = '">';
    outText[outText.length] = txtElem;
    if (elemNum) outText[outText.length] = Array('(',elemNum,')').join('');
    outText[outText.length] = '</option>¥n';
  }
  outText[outText.length] = '</select></form>¥n';
  objFocus.innerHTML = outText.join('');
}

強調されている部分が追加/変更部分です。

var listWidth = '170px';でプルダウンメニューの幅を指定します。cssを利用しているので、単位も含めて記述してください。上記ソースでは「170px」になっています。

また、(数字)部分もメニューに含めるように変更しました。とりあえず動作しているようです。