|
|
|
HOME > HTML & CSSパーツ > サイドメニュー（縦並び）サンプル > サイドメニュー（縦並び）サンプル４ |
|
サイドメニュー（縦並び）サンプル４ |
|
|
|
|
|
|
|
|
|
サイドで使うメニューボタンのサンプルです。 |
|
メニューボタンの左に矢印のワンポイントを置いています。 |
|
|
|
|
|
縦並びのメニューボタンのサンプル |
|
|
|
|
|
|
|
| 使用している画像 |
|
|
|
 |
b1.gif |
|
画像をご利用される場合は、ご自身のパソコンに保存してからご利用下さい。 |
|
 |
a1.gif |
|
※直接リンクでのご使用は禁止です。 |
|
|
|
|
背景の色を、 #eeeeeeにしてお使い下さい。 |
|
|
|
|
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
下記を、外部スタイルシートへ記述して下さい。 |
|
|
|
|
|
|
#nave{
width: 180px;
}
#nave ul {
list-style: none;
margin: 0;
padding: 0px 0px;
border-top: 1px dotted #999999;
}
#nave li {
background:#eeeeee;
margin: 0;
padding: 1px 1px;
border-bottom: 1px dotted #999999;
}
#nave a {
background: url(img/b1.gif) no-repeat 2px;
padding:8px 23px;
display: block;
width: 152px ;
color: #333333;
text-decoration: none;
}
#nave a:hover {
background: url(img/a1.gif) no-repeat 2px;
color: #ff0000;
width: 152px ;
}
|
|
|
|
|
|
|
|
|
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
