Forums

CSS image sprites for custom menu (1 post)

  1. jereruira
    Member
    Posted 4 months ago #

    Just wanted to share, because it took me some time to find the answer:

    For a portfolio site, I wanted to create a menu with an image for each link, using a hover effect and image sprites. But I wanted the menu to be dynamic, so I could change around the order of my pages in my custom menu (inserted as a widget in my sidebar) and still have the right image refer to each link.

    I had a hard time understanding how to call the IDs for each individual link in the custom menu. Turns out this is easy.

    All you need is to find the number of your menu item. Once your menu is created, this number is unique and doesn't change, even if you change the order in the menu. Find <li id="menu-item-XX"> in the source code of your page, call it in your stylesheet, position your sprites accordingly and you are done.

    Hope that helps anyone who searched for this like I did.

Reply

You must log in to post.

About this Topic

  • RSS feed for this topic
  • Started 4 months ago by jereruira
  • This topic is not a support question
  • WordPress version: 3.3.1