|
|
|
HOME > HTML & CSSパーツ > サイドメニュー（縦並び）サンプル > サイドメニュー（縦並び）サンプル２ |
|
サイドメニュー（縦並び）サンプル２ |
|
|
|
|
|
|
|
|
|
サイドで使うメニューボタンのサンプルです。 |
|
メニューボタンの左に付箋のようなワンポイントのマークがあります。 |
|
|
|
|
|
縦並びのメニューボタンのサンプル |
|
|
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
下記を、外部スタイルシートへ記述して下さい。 |
|
|
|
|
|
|
#nave{
width: 180px;
}
#nave ul {
list-style: none;
margin: 0;
padding: 0px 0px;
border-top: 1px dotted #999999;
}
#nave li {
background:#efefef;
margin: 0;
padding: 1px 1px;
border-bottom: 1px dotted #999999;
}
#nave a {
border-left: 8px solid #000099;/*文字の横に付箋のようなマークを入れる*/
padding:7px 10px;
display: block;
width: 152px ;
color: #333333;
text-decoration: none;
}
#nave a:hover {
background: #cccccc;
border-left: 8px solid #FFcc33;/*カーソルオーバーでマークの色が変わる*/
color: #111111;
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
