Wordpressの管理メニューのようなメニューを構築する

Question

私のアプリケーションでは、Wordpressの管理メニューに似た管理メニューを実現しようとしていますが、私が苦労しているのはアイコンの強調表示と下向き矢印の表示ですメニュー項目のマウスオーバー時に表示されます。

私のメニューは、多かれ少なかれ、現時点では以下のようになります。私のCSSは、現時点ではあまりにも非常に簡単です

<ul id="sideMenu"> 
    <li class="sideMenuItem"> 
     <div class="menu-icon-dashboard menu-image"></div> 
     <%: Html.ActionLink("Dashboard", "Index", "Home")%> 
    </li> 
</ul> 

：

#sideMenu 
{ 
    clear: left; 
    float: left; 
    list-style: none outside none; 
    margin: 15px 15px 15px 0px; 
    padding: 0; 
    position: relative; 
    width: 145px; 
} 
.sideMenuItem 
{ 
    background: url('images/menu-bits.gif') repeat-x scroll left -379px #F1F1F1; 
    color: #000000; 
    padding: 5px; 
    border: 1px solid #bbbbbb; 
} 
#sideMenu .menu-icon-dashboard { 
    background: url('images/menu.png') no-repeat scroll -65px -33px transparent; 
} 
#sideMenu div.menu-image { 
    float: left; 
    height: 28px; 
    width: 28px; 
    margin-top: -5px; 
} 

私を変えることについて移動する最良の方法だろう何メニュー項目の右にあるメニューアイコンをクリックし、マウスの上にあるメニュー項目の左に下矢印を表示しますか？

Answer 1

Wordpressは各ナビゲーション項目の背景画像としてスプライトを使用しました。ユーザがメニューの上を移動すると、CSSはhover擬似セレクタを呼び出して背景画像の位置をシフトし、強調表示された画像を表示します。図示

#div { width: 50px; height: 50px; background: url(/path/to/image/) no-repeat 0 0; } 
#div:hover { background-position: 0px -50px; } 

例は100pxに高い画像を必要とする - 通常の状態では画像のは50px上半分を示すであろう、とホバーが発生した場合、DIVは、画像の下部は50pxを示すであろう。

CSSスプライトの詳細については、css-tricks.com