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

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

はじめに

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 | │├メニュー | Trackback(1) | Comments(8)
トラックバックURL : http://potto.exblog.jp/tb/1891948
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from あっと ほぅむ だっど at 2005-05-01 15:36
タイトル : 【Vol.105】 SKINいじり!
ぽっとの陽だまり研究室 様のプルダウンリンクメニューの拡張を参考にさせていただきました。 いつもありがとうございます。 さて、今回めっちゃ久しぶりにいじりいじりしたのは、"エキサイトブログ"欄です。 ここをプルダウンにして、スッキリさせてみようということです。... more
Commented at 2005-05-02 16:31
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-05-06 07:14
鍵さん、はじめまして。
JavaScriptはexciteでは設置ができないことになっています。
そのため、当サイトでは説明を控えさせて頂いています。
ご理解のほどよろしくお願いします。
Commented at 2005-05-12 02:15
ブログの持ち主だけに見える非公開コメントです。
Commented by ryo7955 at 2006-02-08 22:01
はじめましてちょっと教えてください。
exciteブログ(二列スキン使用)を使っています。
メニュー部分に入れたいので上記をコピペしてHTML編集部分に挿入設置できました。
ところが、
カレンダーの下、コメントの下、カテゴリーの下とすべて入ってしまいます。
どのように指定すればよいでしょうか?
初歩的な質問ですみませんが教えてください。
Commented by potto37 at 2006-02-08 22:16
ryo7955さん、はじめまして。
右メニューの2列スキンでよろしいでしょうか。
たぶん、状況から右メニューの所に追加されたと思いますが、
実は右メニューの部分に入力すると、全てのメニューに反映される仕様になっています。(ちょっと判りづらいですよね)

一番簡単な方法は、メモ編集欄に入力する方法です。
この方法が一番簡単なのでお勧めです。

そして、もうひとつの方法はHTMLのメイン部分の <$menuright$> のタグの前後に入れる方法です。

タイトルを付けたい場合は ryo7955さんの場合ですと、以下のようになると思います。

<div class="MN_TTLTXT">タイトル名</div>

簡単な説明ですが、いろいろ試して遊んでくださいね。
Commented by ryo7955 at 2006-02-09 09:03
たびたびすみません。

<div class="MN_TTLTXT">タイトル名</div>

上記はどこに入れるのでしょうか?
Commented by ryo7955 at 2006-02-09 09:47
ごめんなさい 解決しました。

回答は不要です。

ありがとうございました。
Commented by potto37 at 2006-02-09 21:26
ryo7955さん、うまくできたみたいで よかったです^^
<< プルダウンリンクメニューの記事... 記事紹介:ゴールデンウイーク企画 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。