WordPress 3.0 came with a quite handy Native menu support that can be easily customized through the wordpress admin. Here, we are about to see how to create a dropdown menu in wordpress using Superfish , a popular Javascript based dropdown solution. CSS styles can make some gorgeous looking, robust menu solutions.
Please note : Do not try this with your blog’s main theme. Always try with any alternative theme or a separate wordpress installation. Better on a Local server in your Mac or windows pc.
Integrating Superfish with WordPress – wp_nav_menu
Superfish is a suckerfish style dropdown menu solution powered by jQuery framework. It is developed by Joel Birch and free (MIT/GPL dual license).
Superfish requires jQuery framework to work. It is better to include the latest jQuery from google code, rather than the wordpress’ built-in one.
If you are not sure about how to include jQuery from Google code, read this excellent article.
Download superfish-1.4.8.zip from here. Unpack it to the Theme’s Root_folder/scripts/ folder. Create the folders if absent. Remember the folder names you unpack into and always name the files and folders in lowercase.
Superfish requires following to work : jQuery , superfish.js and superfish.css. Remaining plugins can be added later for enhanced functionality. Convenience sake, I moved the required files into a single folder “sf”, under theme’s scripts folder. I suggest you do the same.
Organize the superfish folder.
If you choose not to move the files, make sure you use correct paths later.
Including the superfish script
WordPress allows us to include our scripts and styles in a clean way. We make use of the wordpress functions wp_register_script and wp_enqueue_script to help us. This is to be added to the <head> section of the html output by using wp_head hook.
Okay, open the theme’s function.php.
Add the following code to the file, anywhere between the php tags. The Explanation follows! 
function add_our_scripts() {
if (!is_admin()) { // Add the scripts, but not to the wp-admin section.
// Adjust the below path to where scripts dir is, if you must.
$scriptdir = get_bloginfo('template_url')."/scripts/";
// Remove the wordpresss inbuilt jQuery.
wp_deregister_script('jquery');
// Lets use the one from Google AJAX API instead.
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
// Register the Superfish javascript file
wp_register_script( 'superfish', $scriptdir.'sf/sf.js', false, '1.4.8');
// Now the superfish CSS
wp_register_style( 'superfish-css', $scriptdir.'sf/superfish.css', false, '1.4.8');
//load the scripts and style.
wp_enqueue_script('jquery');
wp_enqueue_script('superfish');
wp_enqueue_style('superfish-css');
} // end the !is_admin function
} //end add_our_scripts function
//Add our function to the wp_head. You can also use wp_print_scripts.
add_action( 'wp_head', 'add_our_scripts',0);
Skip the below explanation.
The explanation
We have created a function here – add_our_scripts() and added it to the wp_head hook. Thus it will be initialized with the theme. Also note the use of is_admin() function(with logical not operator), to exclude our scripts loading in wordpress admin pages.
function add_our_scripts() {
if (!is_admin()) {
// CODE for registering and loading scripts here.
}
}
//Add our function to the wp_head. You can also use wp_print_scripts.
add_action( 'wp_head', 'add_our_scripts',0);
On dissection, our function add_our_scripts() reveals a number of wordpress functions. Particularly wp_register_script() , wp_enqueue_script() , wp_register_style() and wp_enqueue_style(). The scripts and styles are to be registered via wp_register_script/style, and then loaded with wp_enqueue_script/style.
We announce a php variable $scriptdir which returns the absolute path of the scripts directory when echoed. Notice the use of the wordpress function get_bloginfo along with the parameter template_url to get the absolute path to the theme directory. Or, you can use full paths.
//get_bloginfo along with 'template_url' returns the absolute path of the theme directory
$scriptdir = get_bloginfo('template_url')."/scripts/";
Now, please take take a look at the below code. For registering the superfish script and style.
// Remove the wordpresss inbuilt jQuery.
wp_deregister_script('jquery');
// Lets use the one from Google AJAX API instead.
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
// Register the Superfish javascript file
wp_register_script( 'superfish', $scriptdir.'sf/sf.js', false, '1.4.8');
// Now the superfish CSS
wp_register_style( 'superfish-css', $scriptdir.'sf/superfish.css', false, '1.4.8');
wp_deregister_script() removes the inbuilt jquery with wordpress.
wp_register_script() and wp_register_style() register the scripts and styles. If you are not sure of their syntax, Click the respective functions names above for reference.
Likewise, wp_enqueue_script() and wp_enqueue_style() load the registered objects. So, code would be
//load the registered scripts and style.
wp_enqueue_script('jquery');
wp_enqueue_script('superfish');
wp_enqueue_style('superfish-css');
This finishes our custom function add_our_scripts() . Now, this function needs to be initialized with wordpress. To do so, we can use wp_head hook. wp_print_styles works too.
//Add our function to the wp_head. add_action( 'wp_head', 'add_our_scripts',0); //Remember, You may also use wp_print_scripts.
This loads the superfish for use. To make sure it’s loaded, we can do so with Firefox’s “Firebug->NET panel->JS’ or Chrome’s “Inspect Element->Scripts”.
Update : You need to initialize the Superfish menu before use. So, open your theme’s header.php and locate the wp_head() hook (or </head> if the former does not exist) and add the below code.
<script type="text/javascript">
// <![CDATA[
jQuery(function(){
// This initializes the Superfish menu.
jQuery('ul.sf-menu').superfish();
});
// ]]>
</script>
<? php wp_head(); ?>
</head>
Thanks for wpcoder for pointing this out. Those who use the minified version below need not do this, since the script already inits superfish.
Superfish and wp_nav_menu
Superfish uses the CSS class .sf-menu to apply dropdowns. So we need to pass the CSS class “sf-menu” to wp_nav_menu() arguments. To superfish to work, we need to pass the argument ‘menu_class’ => ‘sf-menu’.
So open header.php and proceed to change the wp_nav_menu() arguments.
<div id="navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'main-menu', // Setting up the location for the main-menu, Main Navigation.
'menu_class' => 'sf-menu', //Adding the class for dropdowns
'container_id' => 'navwrap', //Add CSS ID to the containter that wraps the menu.
'fallback_cb' => 'wp_page_menu', //if wp_nav_menu is unavailable, WordPress displays wp_page_menu function, which displays the pages of your blog.
)
);
?>
</div>
Now reload the page and take a look. Superfish menu appears with it’s default style.
Styling Superfish
Dropdown menu is quite not what we were expecting. Let’s style the things up a bit.
Superfish shows up with default style.
Browse to the superfish directory. We are going to play with the main style file, superfish.css. Always backup the file before editing.
As you can see, styles are neatly divided into 4 major sections using comments.
- /*** Essential Styles ***/
- /*** Demo Skin ***/
- /*** arrows ***/
- /*** Shadows for all but IE6 ***/
Leaving the rest for now, we are toying only with the /** Demo Skin ***/.
Comment out or carefully delete the Demo skin section. Now reload the browser and take a look. Yes! Dropdown menu is working. but oops! it looks like a skeleton.
Superfish menu with no background/border styles.
After applying a some basic styles (CSS – background, border properties) as in below code, Now the menu appears as in below picture.
/* The container wrapping .sf-menu */
#navwrap {
float: left;
width: 100%;
background: #600;
font: 1.0em "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
}
.sf-menu {
float: left;
width: 100%;
}
.sf-menu li {
background: transparent;
}
.sf-menu a {
color: #eee;
padding: 9px 15px;
text-decoration: none;
}
.sf-menu ul li a {
color: #eee;
padding: 9px 15px;
text-decoration: none;
border: 1px solid #777;
}
.sf-menu li li {
background: #444;
}
.sf-menu li li li {
background: #444;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #900;
outline: 0;
}
Superfish menu, after applying basic CSS properties
As you can see, the arrows and shadows are missing! . Trust me. Fixing this is a piece of cake!
Scroll to the bottom of superfish.css and find the element styles for .sf-sub-indicator and .sf-shadow . Now look under it’s properties for the background. Change the paths like this.
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
.sf-shadow ul {
background: url('images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
So the entire superfish.css and the preview of the menu!
Final Superfish menu with Shadows,arrows and some CSS3
Entire content of superfish.css.
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** Custom Styles ***/
/* The container wrapping .sf-menu */
#navwrap {
float: left;
width: 100%;
background: #600;
background: -moz-linear-gradient( top, #600, #300); /* CSS 3 */
background: -webkit-gradient(linear, left top, left bottom, from(#600), to(#300));
font: 1.0em "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
border-top: 1px solid #999;
border-bottom: 1px solid #000;
}
.sf-menu {
float: left;
width: 100%;
}
.sf-menu li {
background: transparent;
}
.sf-menu a {
color: #eee;
padding: 9px 15px;
text-decoration: none;
border-bottom: 1px solid #000;
border-left: 1px solid #333;
}
.sf-menu ul li a {
color: #eee;
padding: 9px 15px;
text-decoration: none;
border-bottom: 1px solid #000;
border-top: 1px solid #777;
border-left: 1px solid #333;
border-bottom: 1px solid #111;
}
.sf-menu li li {
background: #444;
}
.sf-menu li li li {
background: #444;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #900;
background: -moz-linear-gradient(top, #200, #600);
background: -webkit-gradient( linear, left top, left bottom, from(#200), to(#600));
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
This completes the integration of superfish menu with wordpress. Well done!
Compressing javascript file – Superfish script
In my projects, I always minify the javascript files to reduce the number of requests. loaded in wordpress are a lot of Javascript and CSS files, not to forget about the ones inserted by the plugins. In such case, this definitely helps. I have minified the superfish script along with the plugins hoverIntent by Brian Cherne and bgiframe by Brandon Aaron.
All the credits belong to the respective authors. Thanks for their hard work.
Download : Minified Superfish JS and Plugins.
Feel free to check out finished theme with Integrated superfish dropdowns
Download : Axtra with Superfish
If something is not working, then?
- Double check the name of the files and folders you created. Case-sensitivity may be the issue. When you use multiple OS, there is a definite possibility.
- Check the Paths. If you use variables for echoing paths, then double check the variables. Firebug’s Net panel, Chrome’s “Inspect Element” can be very helpful for these purposes.
- Check the opening and closing quotes/tags/braces.
- Check the file is saved under the right name/attributes.
Related posts
WordPress Dropdown menu with wp_nav_menu and Little CSS.
Comments/Questions are welcome. 
Kavin.
Pingback: wp-popular.com » Blog Archive » Add an awesome dropdown menu to wordpress with Superfish | Capability
Pingback: Creating An Awesome Dropdown Menu for WordPress 3 Custom Menus | whatanicepost
Pingback: How to center a superfish menu in wordpress (in IE7) | SeekPHP.com
Pingback: wordpress superfish dropdown menu | web technical support