How to do mouse over effect in navigation menu
-
We’re looking to have a mouse over effect like the one use on this website in it’s navigation bar: http://zfoneproject.com/
Is it possible to do this with WordPress? Our programmer says it’s out of his expertise.
-
Christian, you may want to look into hiring a new “programmer.”
The site in question is using very simple CSS conditional image replacement.
If you look at the site’s CSS file, you’ll see that the
a
(link) elements with the class ofglink
do not have a separate background image so long as the mouse isn’t hovering over them. When the pointer is over them (called through the:hover
element), the background changes to<a href="http://zfoneproject.com/glblnav_selected.gif">glblnav_selected.gif</a>
.To read more about image replacement see: http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://allmyfaqs.net/faq.pl?Hover_effectHi dvsmith, I might be misunderstanding you, but it’s not the change in effect of the item being moused over that we’re interested in but the appearance of the additional sub menu of links to other pages (presumably in Javascript).
Here’s what our programmer had to say:
I’m afraid that the drop-down menu functionality that you want is out of my expertise. I have looked into it and I’m not sure how to load the mark-up for the sub-menu into a page that is not a parent or child page. For example, in the Home page, the markup for [sub-pages] needs to be loaded in order to be displayed when a user hovers over the About menu item. But it isn’t. WordPress has a function to call child elements but only child elements of the page you are on. Sorry, but I’m not sure how to do this – I’m not sure whether it can be done in the way you want.
Oh, okay. I misunderstood. (And was a little bit mean.)
It’s possible to do the ‘drop-down’ entirely in CSS.
There’s a pretty good walkthrough here, on the code:
http://www.alistapart.com/articles/hybrid/For the wordpress call to child pages, take a look at:
http://robm.me.uk/projects/plugins/wordpress/list-subpagesIt’s what I’m using on our site (though, not in the exact manner you are).
Okay, thanks very much, I’ll pass this advice onto our programmer.
- The topic ‘How to do mouse over effect in navigation menu’ is closed to new replies.