CSS とロールオーバー状態 (つまり、ホバー、アクティブ) のイメージ スプライトを使用して、ナビゲーション メニューを作成しました。ただし、選択したページに応じて、対応するナビゲーション ボタンが強調表示されるように、「選択済み/現在」の状態 (私の場合はアクティブな状態と同じ) を作成しようとしています。ここに私が持っているものがあります:
CSS:
#menu li {
margin: 0;
padding: 0;
height: 50px;
list-style: none;
display: inline;
float: left;
line-height: 40px;
}
#menu a {
display: block;
height: 50px;
}
#menu a:hover {
background-image:url(../Images/about_rollover.gif)
}
#about {
width: 90px;
}
#about a:hover {
background-position: 0 -50px;
}
#about a:active {
background-position: 0 -100px;
}
#about a:selected {
background-position: 0 -100px;
}
#portfolio {
width: 90px;
}
#portfolio a:hover {
background-position: 90px -50px;
}
#portfolio a:active {
background-position: 90px -100px;
HTML:
<ul id="menu">
<li id="about"><a href"#"></a></li>
<li id="portfolio"><a href="portfolio.html"></a></li>
</ul>
イメージ スプライト:ここで表示