WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Fading menu buttons (8 posts)

  1. Marcus
    Member
    Posted 10 months ago #

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

  2. Andrew
    Forum Moderator
    Posted 10 months ago #

  3. eGriffinWebDesign
    Member
    Posted 10 months ago #

    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

  4. Marcus
    Member
    Posted 10 months ago #

    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.

  5. Marcus
    Member
    Posted 10 months ago #

    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 ;-)

  6. eGriffinWebDesign
    Member
    Posted 10 months ago #

    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

  7. Marcus
    Member
    Posted 10 months ago #

    Perfect! :-) Thank you Michael. That worked a treat. Menu's looking lovely ;-)

  8. eGriffinWebDesign
    Member
    Posted 10 months ago #

    Awesome! Glad I could help!

    Cheers,

    Michael

Reply

You must log in to post.

About this Topic

Tags