前回、上のように<ul>タグの横並びメニューの作成方法を紹介させていただきました。
しかし、このままでは、ちょっと寂しいので、下のようにしてみました。
こうしてみると、メニューにオンマウスされればテキストリンクの色と背景色が変わるので、ユーザーが
今どのメニューを選択しているのか、分かりやすいですよね。
こんな、表現もCSSで簡単にできちゃいます。<a>タグと擬似クラスである:hoverをCSSで表現を指定することで、このようにみせることができます。
記述は、以下のようにします。これは、一例です。
HTMLファイル
<ul id="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
CSSファイル
ul#menu {
list-style-type: none;
color: #333;
margin: 0;
padding: 0;
border: 0;
}
ul#menu li {
float: left;
padding: 0;
margin-right: 1px;;
}
ul#menu a {
text-decoration: none;
color: #00F;
padding: 0 10px;
display:block;
}
ul#menu a:hover {
color: #FFF;
background-color: #999;
}
コメントする