I’m doing a fun site that has a ‘Las Vegas’ vintage tacky sign theme. I created two small ani gif files that are supposed to be the blinking (running) light bulbs used on those old signs.
So what I was thinking was, WordPress gets the first navigation
<li>Home<img scr="img1.gif"></li> <li>About<img scr="img2.gif"></li> <li>Contact<img scr="img1.gif"></li>Etc.
Anyone got any ideas how to do this? 😀 And yes, I’m being ambitious (LOL).
Try using Firefox with the Firebug add-on for this kind of CSS work.
Is this CSS or a php thing?
I don’t think animated .gifs work when they are backgrounds (but gave it a try and yes you can)… so I thought this would be a php issue.
Or were you thinking using the image as the actual ‘bullet’? (which I wasn’t thinking when I thought it up). But when I did look at the classes the LI’s get assigned it seems there are two –
1. page_item page-item-2 (or what ever the number it would be)
2. current_page_item (which would obviously change whenever you change pages)
How would you deal with the dynamic ‘current_page_item’ class?
It’s a CSS thing. The fact that the images are animated shouldn’t make any difference. I had to do something vaguely similar on a site a few years back (the client insisted on it) and I didn’t have any problems with it. But then I wasn’t adding the animations to a dynamic menu – which is where you will start to hit problems.
You could have a look at some advanced CSS selector techniques – such as
current_page_itemclass will need to be handled separately – possibly by using something like
li:nth-child(odd).current_page_itemto cover both eventualities. But so check the results across a good range of common browsers as this the
evenselectors may not be supported across them all.
ESMI – Thanks so much for the reply.
If the ‘current page’ class in WordPress is the bigger problem, is there a way to remove/disable that within the theme – because honestly, they don’t need it.
Going to read your link now.
- The topic ‘Top nav, add alternating image after each nav (li img 1, li img2, li img1)’ is closed to new replies.