WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Fading menu buttons

[Resolved] Fading menu buttons

  • Hey all, anyone know how I can get the menu buttons on my site to fade in and out smoothly when I hover over them. Not critical but it’d be a really nice finishing touch for my site I think πŸ˜‰

    http://www.mandodymedia.com

    Hope someone can help….

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Hello Mandody,

    Not sure if this is exactly what you are looking for, but you can try the following CSS code, and adjust the timing (.75s) to your liking.

    #branding ul.menu li:hover > a {
    -moz-transition: all .75s;
    -webkit-transition: all .75s;
    -o-transition: all .75s;
    transition: all .75s;
    }

    Cheers,

    Michael

    Thanks for both replies πŸ™‚ eGriffinWebDesign – it almost worked perfectly! The text is fading in beautifully, but sadly the fade isn’t working on the box/background. Check it out: http://www.mandody.com

    Any ideas how I can get the box fading in too?

    I feel I’m getting close πŸ˜‰

    Many thanks again.

    OK…I’ve been playing around with CSS3 transitions (thanks for the link Andrew). Almost got it working, but for some reason when I hover over the menu items I still get the white block appearing…fade is working in the background but the white block obscures it. Hmmm?? How can I get rid of the white block rollover…been digging around in the code but can’t seem to find reference to it – but I am a newbie πŸ˜‰

    Looking great Mandody! I think to get it exactly how you want it you just need to change your CSS

    #branding ul.menu li:hover > a {
    background-color: #ffcc00;
    }

    to

    #branding ul.menu li:hover > a {
    background: #ffcc00!important;
    }

    That should override the theme styles properly. Hopefully that works for you.

    Cheers!

    Michael

    Perfect! πŸ™‚ Thank you Michael. That worked a treat. Menu’s looking lovely πŸ˜‰

    Awesome! Glad I could help!

    Cheers,

    Michael

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Fading menu buttons’ is closed to new replies.
Skip to toolbar