Change fonts in menu

[Jeroen]

Hi,

This is the script of the menu:

<div id="pixopoint_menu_wrapper1">
<div id="pixopoint_menu1">
<ul class="sf-menu" id="suckerfishnav">
<li class="categories haschildren"><a
href="">Categories</a>
<ul><li class="cat-item cat-item-1"><a href="?
cat=1" title="View">Uncategorized</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

How do i get all of the items to change to my chosen font?
I already tried this, only no results.

Cufon.DOM.ready(function() {
Cufon
.replace(document.getElementById('sf-
menu').getElementsByTagName('li'));
});

[Gareth Evans]

Hi Jeroen

 

The correct syntax to call cufon for your structure (assuming you have a selector engine such as sizzle or jquery installed as per the FAQ) is:

 

Cufon.replace("ul.sf-menu > li > a", { hover: true });

 

For the top level menu items.

 

Remove the > for the non top level items too, however you will probably run into issues with the font state returning to non hover when you move off child menus if you do this.
In the past, i've used a handler attached to the menu javascript to reset the cufon fonts when subnavs are closed.

Gareth

 

--
You received this message because you are subscribed to the Google Groups "cufón" group.
To post to this group, send email to cu...@googlegroups.com.
To unsubscribe from this group, send email to cufon+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/cufon?hl=en.

[Simo Kinnunen]

Hi Jeroen,

Gareth is right, but if you don't want to use a selector engine you're going to have to go through extra trouble:

Cufon.DOM.ready(function() {
var list, found = [], i, l;
list = document.getElementById('suckerfishnav').childNodes;
for (i = 0, l = list.length; i < l; ++i) {
if (list[i].nodeName.toLowerCase() === 'li') found.push(list[i]);
}
Cufon.replace(found);
});

getElementsByTagName() does not work in this case because it doesn't care about depth.

Simo