Menu Rollovers with multiple images using CSS

Eleanorha
(@eleanorha)

14 years, 7 months ago

I would like to add individual images to individual page links for my main navigation using CSS. Using a:hover would optimal or finding a plug in that will style this would work well too.

I’m trying to figure out if the only way to do this is to hard code the menu like this:

li#menu-item-212 a:hover {background-image: url(link);}

My current thinking is that I can add a single hover image without hard coding but that I can’t add multiple images, each for it’s own navigation without doing the above CSS for each menu item.

My experience level is that I’m familiar with PHP and CSS but not a PHP programmer. I also am familiar with WordPress but don’t know enough to really manipulate it.

Any help or points to previous posts are much appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)

Joshua
(@s001911)

14 years, 7 months ago
you should be able to do something like this
```
#ul-id li a:hover{
     background-image: url('link');
}
```
most menu’s in wordpress have a unique id for the ul, if not find the closest div and sub that.
Thread Starter Eleanorha
(@eleanorha)

14 years, 7 months ago

Thank you Joshua.

The code you provided seems like it would only allow me to create one background image for multiple links. I am looking for a unique image for each link in the navigation.

Joshua
(@s001911)

14 years, 7 months ago

are you trying to use a completly different image for each one, like a blue circle with “home” written on it and a green square with “about us” written on it or all of them green squares just different text. If the latter is the case the css is rather easy, if the former you will need to do it with every item a different class.
helplisa
(@dhrumindc)

14 years, 1 month ago
I am trying to same thing as Eleanorha been trying.

Joshua.. Can you help me on this..
```
.sidebarmenu #menu-item-21 a {
background-image:url('images/new.jpg'); }

.sidebarmenu #menu-item-21 a:hover { background-image:url('images/new.jpg');}
```
```
.sidebarmenu #menu-item-22 a {
background-image:url('images/new.jpg'); }

.sidebarmenu #menu-item-22 a:hover { background-image:url('images/new.jpg');}
```
```
.sidebarmenu #menu-item-23 a {
background-image:url('images/new.jpg'); }

.sidebarmenu #menu-item-23 a:hover { background-image:url('images/new.jpg');}
```
```
.sidebarmenu #menu-item-24 a {
background-image:url('images/new.jpg'); }

.sidebarmenu #menu-item-24 a:hover { background-image:url('images/new.jpg');}
```
It not taking any images any help?

Thanks!
Michael
(@alchymyth)

14 years, 1 month ago

please post a link to your site to illustrate the problem –
(edit: just saw that you are developing locally, so there is really nothing anybody here can do)

fundamental formatting help is not within the scope of thie WordPress forum;

general troubleshooting questions:

are you sure you are targetting the right css selectors?
are the selectors specific enough for the individual menu items?
are you familiar with using Firebug or a similar browser tool?
you seem to be using the same background format for link and :hover – is that on purpose?
have you read about ‘css image sprites’?
alvaroprudente
(@alvaroprudente)

13 years, 8 months ago
OK… I’ve got it…

the wordpress generated nav_menu is in my case:
(check that by looking at you page and view the sourcecode)
```
<nav id="access" role="navigation">
	<div class="menu">
          <ul>
           <li class="page_item page-item-37"><a href="http://2012.ficvaldivia.cl/?page_id=37">Festival</a>
               <ul class='children'>...</ul>
           </li>
           <li class="page_item page-item-62"><a href="http://2012.ficvaldivia.cl/?page_id=62">Competencia</a>
                 <ul class='children'>...
```
css:
```
.page-item-37 {
    background-image: url('images/festival.png');
    }
...
.page-item-62 {
    background-image: url('images/competencia.png');
    }
```
remember: if an entry has directly a class assigned, it’s css is easily accesible by
.classname