Hi grausc01-
Here's something I did for a client a while back. It should work for you.
function child_head_scripts() { ?>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/superfish.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("ul.sf-menu")
.find('li.current_page_item,li.current_page_parent,li.current_page_ancestor')
.addClass('current') // WP fix : Enables showing of subapage nav when on one
.end()
.superfish({
pathClass : 'current',
delay: 400, // delay on mouseout
speed: 'fast', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
});
</script>
<?php }
add_filter('thematic_head_scripts','child_head_scripts');
function child_add_menuclass($ulclass) {
return preg_replace('/<ul>/', '<ul class="sf-menu sf-navbar">', $ulclass, 1);
} // end thematic_add_menuclass
add_filter('wp_page_menu','child_add_menuclass');
You'll need to include css to make it look the way you desire. The sf demo default styling can be found here:
http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish-navbar.css
It looks pretty horrible applied to thematic. Here' an experimental bit I was working on to make it look better with the default thematic stylesheet.
/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu */
.sf-navbar {
height: 2.5em;
margin-bottom: 2.5em;
position: relative;
}
.sf-navbar li , .sf-navbar li ul li a, .sf-navbar li ul {
border: none;
background: none;
}
.sf-navbar li {
position: static;
}
.sf-navbar a {
padding: 9px 20px;
}
.sf-navbar li ul {
width: 44em; /*IE6 soils itself without this*/
margin-top: 1px;
}
.sf-navbar li li {
position: relative;
}
.sf-navbar li li ul {
width: 100%;
}
.sf-navbar li li li {
width: 100%;
}
.sf-navbar ul li {
width: auto;
float: left;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul ,
.sf-navbar .current ul,
.sf-navbar ul li:hover ul,
.sf-navbar ul li.sfHover ul,
.sf-navbar .current_page_item ul {
left: 0;
top: 3.2em; /* match top ul list item height */
}
.sf-navbar .current ul ul {
top: -999em;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar a:focus,
.sf-navbar a:hover,
.sf-navbar a:active,
.sf-navbar .current_page_item a {
background: #fff;
}
/* thematic experiment - for default look - sprfsh enabled borders */
.sfHover a,
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a:hover,
.sf-menu a:hover, .current_page_item.sf-breadcrumb ul li a,
.current_page_item.sf-breadcrumb.sfHover a,
.current_page_parent.sf-breadcrumb.sfHover a,
.current_page_ancestor.sf-breadcrumb.sfHover a
{
border-bottom: solid 1px #FFFFFF;
}
/* thematic experiment - for default look - sf-tab border color */
.current_page_item.sf-breadcrumb a,
.current_page_parent.sf-breadcrumb a,
.current_page_ancestor.sf-breadcrumb a
{
border-bottom: solid 1px #cccccc;
}
.sf-menu a:hover {
color:red;
}
Hope you find it useful.
-Gene
