|
 |
|
引き出すようなリンクボタン
サンプルと機能
→ Sample 1：上から下に引き出すようなリンクボタン
→ Sample 2：左から右に引き出すようなリンクボタン
引き出すようなリンクボタンを、スタイルシートを用いて作成します。
画像を使わないので、容量を軽くすることができるのが特徴です。
サンプル・ソース
緑の文字が変更箇所で、赤い文字が対応するスクリプトです。
"//"以下はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ Sample 1：上から下に引き出すようなリンクボタン
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
BODY{
margin: 0px;
}
A.menu {
float: left; /*
左揃え */
width: 100px; /*
横幅 */
background-color: #ddeedd; /* 背景色 */
border: solid 1px #669966; /* 枠の色 */
margin: -13px 0px 0px -1px;
padding: 15px 0px 1px;
font-size: 12px; /* フォントサイズ
*/
text-align: center; /* 水平揃え */
text-decoration: none; /* 下線を消す */
}
A.menu:hover {
margin: -1px 0px 0px -1px;
}
-->
</STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="#" class="menu">HOME</A>
<A href="#" class="menu">BBS</A>
<A href="#" class="menu">LINK</A>
<A href="#" class="menu">ABOUT US</A>
<A href="#" class="menu">SITE MAP</A>
<A href="#" class="menu">CONTACT</A>
</BODY>
</HTML> |
→ Sample 2：左から右に引き出すようなリンクボタン
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
BODY{
margin: 0px;
}
A.menu {
width: 140px; /*
横幅 */
height: 20px; /*
縦幅 */
background-color: #ddddee; /* 背景色 */
border: solid 1px #666699; /* 枠の色 */
margin: 0px 0px -1px -30px;
padding: 5px;
font-size: 12px; /* フォントサイズ
*/
text-align: right; /* 水平揃え */
text-decoration: none; /* 下線を消す */
}
A.menu:hover {
margin: 0px 0px -1px -1px;
}
-->
</STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="#" class="menu">HOME</A><BR>
<A href="#" class="menu">BBS</A><BR>
<A href="#" class="menu">LINK</A><BR>
<A href="#" class="menu">ABOUT US</A><BR>
<A href="#" class="menu">SITE MAP</A><BR>
<A href="#" class="menu">CONTACT</A><BR>
</BODY>
</HTML> |
解説・注意点など
もともと一定の大きさのリンクを、はじめはその一部を上の非表示部分に隠しておき、
マウスが上にくると、下にずらすようにしています。
"A.menu"の"margin: -13px 0px 0px -1px;"部分では、
はじめにあらかじめ13ピクセル上にずらしているということです。
スタイルシートの多くは装飾に用いているだけなので、
いろいろと改造してみて下さい。
スタイルシートについて、詳しくはこちらをご覧ください。
← Webデザインテクニックに戻る
|
|
|
