|
|
|
HOME > HTML & CSSパーツ > サイドメニュー（縦並び）サンプル > サイドメニュー（縦並び）サンプル３ |
|
サイドメニュー（縦並び）サンプル３ |
|
|
|
|
|
|
|
|
|
サイドで使うメニューボタンのサンプルです。 |
|
背景に画像を使ったタイプです。画像を変えるだけで様々なバリエーションで利用できます。 |
|
|
|
|
|
縦並びのメニューボタンのサンプル |
|
|
|
|
|
|
|
|
使用している素材 |
|
|
|
 |
img01.jpg |
素材をご利用になる場合は、右クリックで「名前を付けて画像を保存」でご自身のパソコンへ保存してからご利用下さい。 |
|
|
|
※直接リンクでの使用方法は禁止です。 |
|
 |
img02.jpg |
|
|
|
|
|
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
下記を、外部スタイルシートへ記述して下さい。 |
|
|
|
|
|
|
#nave{
width: 180px;
}
#nave ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #cccccc;
}
#nave li {
margin: 0;
padding: 0;
border-bottom: 1px solid #cccccc;
}
#nave a {
background: url(img/img01.jpg) no-repeat;/*通常時の背景画像*/
padding:7px 10px;
display: block;
width: 160px ;
color: #111111;
text-decoration: none;
}
#nave a:hover {
background: url(img/img02.jpg) no-repeat;/*カーソルオーバー時の背景画像*/
color: #FFFFFF;
width: 160px ;
}
|
|
|
例では、imgというフォルダに画像を保存しています。 |
|
|
|
|
|
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
