Front-end Web Developer | Tampa, FL

How to create rollover image menu in WordPress

Posted on: February 18th, 2010 by admin No Comments
  • Create pages for example: Home, Services, Portfolio, Blog, Contact
  • Next from the left navbar click on AppearanceWidgets:
    create rollover image menu in WordPress
  • Move Pages from Available Widgets to your Sidebar:
    create rollover image menu in WordPress
  • Now we have to create rollover image menu. In Photoshop i created images for our menu:
    I have two images with height 36px each:

    create rollover image menu in WordPress

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

    create rollover image menu in WordPress

    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:

     

     

    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

    Comments are closed.