Make SIFR and Suckerfish Play Nice in Wordpress
I’ve been working with sIFR (scalable Inman Flash Replacement) lately since I grew tired of the same old fonts and did not feel like making images for everything.
A recent project called for special fonts especially in the menu. The client asked to add dropdown menus to the items. I thought, no problem easy as can be, I will use the standard Suckerfish dropdown method and we are golden.
The site is also built on Wordpress and the menu is generated by the function wp_list_pages.
Once I applied the sIFR call to the .page_item elements there were problems.
The sIFR caused the suckerfish dropdowns to not work properly since the additional flash elements were not hidden. The flash submenu items showed and the suckerfish style dropdowns were not applied.
The wp_list_page function generates an automatic list of your pages in a unordered list with classes such as .page_item assigned to the li list element for each menu item. Assigning sIFR to change all elements that have the .page_item class on the li throws off the menu by giving the same font size to the top level and second level items.
The solution is to wrap the links inside the li elements with another div. Then assign sIFR scripts to change that new wrapped div. Using jquery and the superfish plugin you can easily wrap all elements of the menu in a new class by using the wrap() function.
$(document).ready(function(){
$(".page_item a").wrap("
“);
$(”#mainMenu ul”).superfish();
});
Then using superfish you can apply the suckerfish style dropdown script to the menu. The result is a dropdown menu that has the sIFR fonts applied only to the top items.
Tags: coding tips, css, javascript, jquery, sifr, suckerfish, superfish, wordpress