Front-end Web Developer | Tampa, FL

Create pages for example: Home, Services, Portfolio, Blog, Contact

Next from the left navbar click on Appearance – Widgets:

Move Pages from Available Widgets to your Sidebar:

Now we have to create rollover image menu. In Photoshop i created images for our menu:
I have two images with height 36px each:

Now we have to unite this two images in one with height 72px:

As You can see this image is combination of two images with height:  36px + 36px.

Next we have to add some styles to our CSS file. Connect to the ftp and open file style.css from folder: /wp-content/themes/YourTheme/

Every menu in WP has an unique class: page-item-14, page-item-41, so we will add this code:

{CODE type:php;}
#sidebar .page-item-41 {
height: 36px;
width: 174px;
display: block;
}
#sidebar .page-item-41 a {
background: url(images/services-btn.png) 0 0 no-repeat;
width: 174px;
height: 36px;
display: block;
text-indent: -9999px
}
#sidebar .page-item-41 a:hover {
background-position: 0 -36px
}
{/CODE}

What in this code:

#sidebar .page-item-41 a
height: 36px – this is half of our image height (important)
background: url(images/services-btn.png) 0 0 no-repeat  – our image background with background position left: 0 top:0

#sidebar .page-item-41 a:hover
background-position: 0 -36px – we added negative position of image background top: -36px

 

Here what we got:

 

• Services

 

Or You can see a live WP site with this menu: http://webvine.com.au/

OK, if You have any questions leav me a comment

——-

How to add active menu style for WP menu

When you click on site menu, the active menu adding new class:

{CODE type:php;}
<li class=”current_page_item”><a href=”#”>Active Menu</a></li>
{/CODE}

So to adding CSS style effect to Active menu you should add at the bottom of your CSS file this code:

{CODE type:php;}
#sidebar .current_page_item a {background-position: 0 -36px}
{/CODE}

 

Thx, Vlad