CODEWITHSUNDEEP
htmlcss
LiamGu
LiamGu

Reputation: 5348

Build a menu like Wordpress' Admin Menu

In my application, I'm trying to achieve an admin menu akin to Wordpress' admin menu, however, the effect I'm struggling with is having the icon highlight and the down arrow show on mouseover of the menu item.

My menu looks more or less like the below at present:

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

My CSS is pretty simple too at present:

#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;
}

What would be the best way to go about changing my menu icon on the right of the menu item and showing a down arrow on the left of the menu item on mouse over?

Upvotes: 1

Views: 1681

Answers (1)

Dave Kiss
Dave Kiss

Reputation: 10487

Wordpress used sprites as the background images for each navigation item. When the user hovers over the menu, the css calls the hover pseudo-selector to shift the position of the background image to show the highlighted image.

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

The example shown would require an image that is 100px high - the normal state would show the 50px top half of the image, and when the hover occurs, the div would then show the bottom 50px of the image.

Learn more about css sprites at css-tricks.com

Upvotes: 1

Related Questions