Cufon - problem with hover effects and active menu items

Question

I have created a menu using cufon fonts.

I decided to apply the following styles on menu items:

• normal : grey color text
• hover : black color text
• active : red color text

The problem is that hovering the (red) active menu item, has as a result to turn it back to grey color (and make it look like any other "normal" menu item). I don't understand why, can you help me fix it?

Here is the current cufon configuration:

Cufon.replace('ul#mainmenu li > a', {
    color: '#868686',
    fontFamily: 'pfbeau',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
    hover: {
        color: '#3e3e3e'
    }
});
Cufon.replace('ul#mainmenu li.active > a', {
    color: '#af1217',
    fontFamily: 'pfbeau',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
    hover: false
});

Answer 1

CRACKED IT MATE!

Cufon('ul#mainmenu li.active a', {
hover: { color: '#3e3e3e'},
    color: '#af1217',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon('ul#mainmenu li a', {
    hover: { color: '#3e3e3e'},
    color: '#868686',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon.replace('ul#mainmenu li', {
    color: '#868686',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon.replace('ul#mainmenu li.active a', {
    color: '#af1217',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});    

Check it out! - http://jsfiddle.net/3Yf4G/2/

Replace the font 'BlackBeard' with yours...

Answer 2

Actually, what you need to do is:

Cufon.replace('#THE-NAME-OF-YOUR-DIV', { hover: true });

and then just set the on hover effects from the style.css or whatever your templates css is. Also, you can make the menu item that represents the current page highlight:

CSS:

#THE-NAME-OF-YOUR-MENU-DIV ul li a:hover,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-item > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-parent > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-ancestor > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li:hover > a {
  color: #73c8ff;
}

Cufon Code:

Cufon.replace('#THE-NAME-OF-YOUR-MENU-DIV', { hover: true });

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-item > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-parent > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-ancestor > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li:hover > a', {
    color: '#73C8FF',
});

This actually worked for me multiple times. I have been able to solve most issues with cufon. One issue is upsetting me is I am finding if you need italic or bold italic fonts sometimes the .js file or something causes Cufon to make everything italic. So basically sometimes enabling the option to have italic causes everything to be italic. Otherwise, no issues, and the later is infrequent, but persistent. Overall, I am a big Cufon Fonts fan.

Answer 3

Try setting the red active color to !important.

color: '#af1217 !important'

Answer 4

I've also had issues with cufon acting up when you try to do anything beyond basic text outputting. Also it can get slow, it is resource demanding.

I'd strongly suggest trying to use @font-face instead, it works just like it should, listens to css, and all that js free/faster.

http://www.fontsquirrel.com/fontface/generator

Answer 5

Cufon doesn't like applying multiple styles to an element. Therefore, use the :not selector to only apply the first cufon replacement to those anchor tags that are not children of the .active class...

Cufon.replace('ul#mainmenu li:not(.active) > a', { 
    color: '#868686', 
    fontFamily: 'pfbeau', 
    fontSize: '15px', 
    textShadow: '0 2px 0.1em #fff', 
    hover: { 
        color: '#3e3e3e' 
    } 
}); 
Cufon.replace('ul#mainmenu li.active > a', { 
    color: '#af1217', 
    fontFamily: 'pfbeau', 
    fontSize: '15px', 
    textShadow: '0 2px 0.1em #fff', 
    hover: false 
});