|
|
|
HOME > HTML & CSSパーツ > サイドメニュー（縦並び）サンプル > サイドメニュー（縦並び）サンプル１ |
|
サイドメニュー（縦並び）サンプル１ |
|
|
|
|
|
|
|
|
|
サイドで使うメニューボタンのサンプルです。 |
|
背景や文字の色が滑らかにロールオーバーするようにしています。 |
|
|
|
|
|
縦並びのメニューボタンのサンプル |
|
|
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
下記を、外部スタイルシートへ記述して下さい。 |
|
|
|
|
|
|
#nave{
width: 180px;
}
#nave ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #999999;/*上部に線を引く*/
}
#nave li {
margin: 0;
padding: 0;
border-bottom: 1px solid #999999;/*下部に線を引く*/
}
#nave a {
background: #660000;/*背景の色*/
padding:7px 10px;
display: block;
width: 160px ;
color: #FFFFFF;/*文字の色*/
text-decoration: none;
}
#nave a:hover {
background: #330000;/*カーソルオーバーの時の背景の色*/
color: #cccccc;/*カーソルオーバー時の文字の色*/
width: 160px ;
}
|
|
|
|
|
|
|
|
|
HTML記述例 |
|
メニューボタンを挿入する場所へ下記を記述して下さい。 |
|
|
|
|
<div id="nave">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">問い合わせ</a></li>
</ul>
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
