カテゴリ:
開閉式リンク(プルダウンリンク)の作成方法です。

相互リンクが多くなってくると、「リンクが並んでしまって邪魔だな~」と感じてくると思います。

そんな時に使いたいのが、開閉式の相互リンクです。


HTML

<form name="pulldown_all">
<select onchange="if (this.value) window.open(this.value,'_blank')">
<option value="">名前(例 / リンク集)</span></option>
<option value="サイトURL(1番目)">サイト名(1番目)</option>
<option value="サイトURL(2番目)">サイト名(2番目)</option>
</select>
</form>


完成例 




こちらは、HTMLのみで、作成可能です。初期設定で、別タブで開くよう設定されています。

新たにリンクを追加したい場合は、

</select>の手前に<option value="サイトURL">サイト名</option>を追加していってください。


一応CSSでもデザインの変更は可能です。

ですが、selectが使われているHTMLが一括で変更となるので、プルダウン式リンクのデザイン変更はやめておいた方が無難かもしれません。


CSS

select {
-webkit-appearance: menulist;
box-sizing: border-box;
align-items: center;
border: 3px double ;
border-color : #ff003f #ff54ee #ff003f #ff54ee ;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
white-space: pre;
-webkit-rtl-ordering: logical;
color: black;
cursor: default;
font-size: 17px;
background: url(画像URL) repeat-x 0 0;
}


あまりオススメはしませんが、もし、デザインを変更したい方がいましたら、はこちらをCSSに追加して変更してください。