<< プルダウンリンクメニューの記事... 記事紹介:ゴールデンウイーク企画 >>
 

プルダウンリンクメニューの拡張

はじめに

excite でもプルダウンリンクメニュー利用できることを発見し、公開してからいろいろな方に利用していただいています。
このプルダウンリンクメニューをもっと使いやすくする方法を考えて見たいと思います。

まず、プルダウンメニューの項目が多くなるとメニューを選ぶ方が分かりづらくなります。
そこで、図1に示すoptgroupタグを用いてオプションをグループとして分ける方法が考えられます。
このプルダウンリンクメニューはHTML部分でoptgroupタグを用いてグループを分けています。そして、CSS編集でグループのタイトルのバックグランドカラーを指定しています。


a0031863_2014552.jpg

図1 設置の一例


実際に触ってみよう!

では、実際に触って見てください。感触が掴めたでしょうか。これからのレッスンはこのプルダウンリンクメニューの作り方を説明します。ちょっと難しいと感じられる方もいらっしゃるかもしれませんが、ゆっくり試して下さいね。






HTML編集

投稿欄やスキン編集部分に以下のHTMLタグを入れます。optgroupタグで、optionを囲んでいるのが分かるでしょうか。
これだけでも、機能します。



HTML編集


<select onchange="location.href = this.options[selectedIndex].value" >
<option>リンク集</option>

<optgroup label="グループタイトル1">
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
</optgroup>

<optgroup label="グループタイトル2">
<option value="URLアドレス" >サイトタイトル5</option>
<option value="URLアドレス" >サイトタイトル6</option>
<option value="URLアドレス" >サイトタイトル7</option>
<option value="URLアドレス" >サイトタイトル8</option>
</optgroup>

</select>




CSS編集

続いて、外観を変えたいと思います。CSS編集に以下のコードを追加して下さい。ちょっとだけ見やすくなったでしょうか。この部分は皆さんがいろいろ工夫してくださいね。きっと、利用しやすいプルダウンリンクメニューができると思いますよ。



CSS編集

optgroup{background-color:#ccccff;}
option{background-color:#ffffff;}



実際の設置タグの一例

実際に設置しているタグの一例です。分からない方は、このタグをコピーして変更しながら試して下さいね。



設置タグの一例


<select onchange="location.href = this.options[selectedIndex].value">
<option>リンク集</option>
<optgroup label="HTML&CSS関連">
<option value="http://www.tohoho-web.com/www.htm" >とほほのWWW入門</option>
<option value="http://www.htmq.com/style/index.shtml">HTMLクイックリファレンス</option>
<option value="http://www.cybergarden.net/">CYBER@GARDEN</option>
<option value="http://326style.com/">1からわかるおもしろ日記書き方講座</option></optgroup>

<optgroup label="素材屋さん">
<option value="http://www.geocities.jp/eko6262/">Eko's Taste</option>
<option value="http://www.grn.mmtr.or.jp/~ka-mu/">イラそよ</option>
<option value="http://www.shineblue.com/">アトリエ フリー</option>
<option value="http://homepage3.nifty.com/bevel/">★フリー素材BEVEL★</option>
<option value="http://maro.fun.cx/">Green Gables*まろのアトリエ</option>
<option value="http://www.pikoland.net/">ぴこらんど</option>
<option value="http://www010.upp.so-net.ne.jp/satochareds/">SkyLine -空の素材-」</option>
</optgroup>
</select>



今日のポイント
  • optgroupでグループ分けが可能です。

  • excite以外でも利用できるので活用範囲が広がりますね。

  • JavaScriptがONになっていないと機能しません。




難易度:★★
HTML編集がちょっと難しいかもしれませんね。でも、がんばって下さいね。
ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-04-30 12:05 | │├メニュー
<< プルダウンリンクメニューの記事... 記事紹介:ゴールデンウイーク企画 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。