Sopov.com freelancer, html and css tips and tricks

How to create rollover image menu in WordPress, without any plugins?

Ok, first of all You need to create menu page links:

1. Log in to the WP admin panel: http://YourSite.com/wp-admin/
2. Click on Pages from left panel then Add New:
   
3. Create pages for example: Home, Services, Portfolio, Blog, Contact
4. Next from the left navbar click on Appearance - Widgets:
   
5. 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:

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

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:

<li class="current_page_item"><a href="#">Active Menu</a></li>

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

#sidebar .current_page_item a {background-position: 0 -36px}

Thx, Vlad