CSSでフラットメニューを作る
以下のようなメニューを作ります。
メニューにカーソルを持って行くと色が変わります。
| test01 | test02 | test03 |
HTMLソース（flatmenu.html）
<html>
<head>
<link rel="stylesheet" type="text/css" href="flatmenu.css">
</head>
<body>
<table border="0" class="menu-table">
<tr class="menu">
<td class="menu-active"><a href="test01.html">test01</a></td>
<td><a href="test02.html">test02</a></td>
<td><a href="test03.html">test03</a></td>
</tr>
</table>
</body>
</html>
|
CSSソース（flatmenu.css）
.menu-table{
border:1px solid black;
border-collapse:collapse;
}
.menu td{
border:1px solid black;
padding: 0px;
}
.menu a{
padding:3px 5px 3px 5px;
background-color:yellow;
display:block;
}
.menu a:hover{
background-color:green;
display:block;
}
.menu-active a{
background-color:pink;
}
|