|
|
|
HOME > HTML & CSSパーツ > メニューボタン（CSS）サンプル |
|
メニューボタン（CSS）サンプル |
|
|
|
|
|
|
|
|
|
メインメニューのボタンのサンプルです。 |
|
背景の画像やカラーを変えれば、簡単にデザインにあった、メニューボタンが作成できます。 |
|
|
|
|
|
スタイルシート（CSS）を使ったメニューボタンのサンプル |
|
|
|
|
|
|
|
| 使用している画像 |
|
 |
b1.gif |
|
画像をご利用される場合は、ご自身のパソコンに保存してからご利用下さい。 |
|
|
|
|
|
|
 |
a1.gif |
|
※直接リンクでのご使用は禁止です。 |
|
|
|
|
背景の色を、 #eeeeeeにしてお使い下さい。 |
|
|
|
|
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
下記を、外部スタイルシートへ記述して下さい。 |
|
スタイルシートを menu.cssという名前で保存して下さい。 |
|
<head>と</head>の間に、linkでCSSをHTMLに読み込ませて下さい。 |
|
<link href="menu.css" rel="stylesheet"type="text/css"
/> |
|
|
|
|
#navbar{
width: 605px;
height:35px;
position:absolute;
border-bottom:1px solid #cccccc;/*上に線*/
border-top:1px solid #cccccc;/*下に線*/
border-left:solid 1px #cccccc;/*左にラインを入れる*/
}
#navbar ul{
margin:0;
padding:0;
list-style-type:none;
font-size: 12px;
line-height:35px;
letter-spacing:2px;
}
#navbar li{
background-image:url(img/img01.jpg); /*上部メニューのボタンの背景*/
float:left;
width:120px; /*メニューボタンの幅*/
text-align:center;
margin:0;
padding:0;
border-right:solid 1px #cccccc;/*右にラインを入れる*/
}
#navbar ul a:hover{
background-image:url(img/img02.jpg); /*メニューボタンにカーソルが来た時に背景画像をこれにする*/
width:120px; /*メニューボタンの幅*/
}
#navbar a{
color:#1AA8C5;/*メニューボタンの文字の色*/
text-decoration: none;
display:block;
}
#navbar a:hover{
color:#ff0000; /*カーソルが上に来た時メニューの文字が、この色に変わる*/
}
|
|
|
設置位置を指定する場合は |
|
top:100px; 上から100px |
|
left:0px; 左ピッタリ |
|
このようにポジションの指定を追記して下さい。（ヘッダーの下に置く場合など） |
|
|
|
|
|
HTML記述例 |
|
メニューボタンを挿入する場所へ下記を記述して下さい。 |
|
|
|
|
<div id="navbar">
<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>
|
|
| 位置指定をスタイルシートでしない場合は、HTMLの記述した場所に設置されます。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
