プルダウンリンクメニューの拡張
はじめに
excite でもプルダウンリンクメニュー利用できることを発見し、公開してからいろいろな方に利用していただいています。
このプルダウンリンクメニューをもっと使いやすくする方法を考えて見たいと思います。
まず、プルダウンメニューの項目が多くなるとメニューを選ぶ方が分かりづらくなります。
そこで、図１に示すoptgroupタグを用いてオプションをグループとして分ける方法が考えられます。
このプルダウンリンクメニューはHTML部分でoptgroupタグを用いてグループを分けています。そして、CSS編集でグループのタイトルのバックグランドカラーを指定しています。
このプルダウンリンクメニューをもっと使いやすくする方法を考えて見たいと思います。
まず、プルダウンメニューの項目が多くなるとメニューを選ぶ方が分かりづらくなります。
そこで、図１に示すoptgroupタグを用いてオプションをグループとして分ける方法が考えられます。
このプルダウンリンクメニューはHTML部分でoptgroupタグを用いてグループを分けています。そして、CSS編集でグループのタイトルのバックグランドカラーを指定しています。
図１ 設置の一例
実際に触ってみよう！
では、実際に触って見てください。感触が掴めたでしょうか。これからのレッスンはこのプルダウンリンクメニューの作り方を説明します。ちょっと難しいと感じられる方もいらっしゃるかもしれませんが、ゆっくり試して下さいね。
HTML編集
投稿欄やスキン編集部分に以下のHTMLタグを入れます。optgroupタグで、optionを囲んでいるのが分かるでしょうか。
これだけでも、機能します。
これだけでも、機能します。
HTML編集
<select onchange="location.href = this.options[selectedIndex].value" >
<option>リンク集</option>
<optgroup label="グループタイトル１">
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
</optgroup>
<optgroup label="グループタイトル２">
<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/">１からわかるおもしろ日記書き方講座</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編集がちょっと難しいかもしれませんね。でも、がんばって下さいね。
ぽっと
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37
| 2005-04-30 12:05
| │├メニュー
