WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to do mouse over effect in navigation menu (5 posts)

  1. Christiaan
    Member
    Posted 5 years ago #

    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.

  2. dvsmith
    Member
    Posted 5 years ago #

    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 of glink 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_effect

  3. Christiaan
    Member
    Posted 5 years ago #

    Hi 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.

  4. dvsmith
    Member
    Posted 5 years ago #

    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-subpages

    It's what I'm using on our site (though, not in the exact manner you are).

  5. Christiaan
    Member
    Posted 5 years ago #

    Okay, thanks very much, I'll pass this advice onto our programmer.

Topic Closed

This topic has been closed to new replies.

About this Topic