プルダウンメニュー

リストボックス型のプルダウンメニュー。

サンプル
↓↓↓↓↓↓
メニュー ページ1に移動します ページ2に移動します ページ3に移動します
※各項目へリンクが貼っていません。移動したら、ブラウザの「戻る」ボタンで戻ってきて下さい。

ソースはこんな感じで。赤字の部分を変更れば、OK。
------------------------------------------------------------------------------------------
<form>
   <select onChange="location.href=value;">
      <option value="#">メニュー</option>
      <option value="page1.html">ページ1に移動します</option>
      <option value="page2.html">ページ2に移動します</option>
      <option value="page3.html">ページ3に移動します</option>
   </select>
</form>
--------------------------------------------------------------------------------------------

これでも一応JavaScriptである。
onChange="location.href=value;"
の部分がそうだ。


スタイルシートを適応すれば次のような事もでｌきる。
サンプル
↓↓↓↓↓↓
メニュー ページ1に移動します ページ2に移動します ページ3に移動します
※各項目へリンクが貼っていません。移動したら、ブラウザの「戻る」ボタンで戻ってきて下さい。

htmlソース
------------------------------------------------------------------------------------------
<form>
   <select onChange="location.href=value;">
      <option value="#">メニュー</option>
      <option value="page1.html" class="red">ページ1に移動します</option>
      <option value="page2.html" class="blue">ページ2に移動します</option>
      <option value="page3.html" class="red">ページ3に移動します</option>
   </select>
</form>
--------------------------------------------------------------------------------------------

これに次のスタイルシートを適応しただけである。
--------------------------------------------------------------------------------------------
option.red {
   background-color: #ffffcc;
   color: red;
}
option.blue {
   background-color: #ccffcc;
   color: blue;
}
-------------------------------------------------------------------------------------------