This is a short and easy step-by-step guide to using the jQuery menu plugin, Superfish, developed by Joel Birch.
Step 1 Downloading
Download the Superfish pack zip from the official website.
Step 2 File Structure
Copy the CSS and JS to the theme's folder. For our tut, the target is the twentyeleven folder. The directory names are superfish-css and superfish-js.
Step 3 Import Commands
Import the CSS & JS files to header.php with the wp_enqueue_script and wp_enqueue_style WordPress functions.
1 |
|
2 |
<?php
|
3 |
add_action( 'wp_enqueue_scripts', 'superfish_libs' ); |
4 |
function superfish_libs() |
5 |
{
|
6 |
// Register each script, setting appropriate dependencies
|
7 |
wp_register_script('hoverintent', get_template_directory_uri() . '/superfish-js/hoverIntent.js'); |
8 |
wp_register_script('bgiframe', get_template_directory_uri() . '/superfish-js/jquery.bgiframe.min.js'); |
9 |
wp_register_script('superfish', get_template_directory_uri() . '/superfish-js/superfish.js', array( 'jquery', 'hoverintent', 'bgiframe' )); |
10 |
wp_register_script('supersubs', get_template_directory_uri() . '/superfish-js/supersubs.js', array( 'superfish' )); |
11 |
|
12 |
// Enqueue supersubs, we don't need to enqueue any others in this case, as the dependencies take care of it for us
|
13 |
wp_enqueue_script('supersubs'); |
14 |
|
15 |
// Register each style, setting appropriate dependencies
|
16 |
wp_register_style('superfishbase', get_template_directory_uri() . '/superfish-css/superfish.css'); |
17 |
wp_register_style('superfishvert', get_template_directory_uri() . '/superfish-css/superfish-vertical.css', array( 'superfishbase' )); |
18 |
wp_register_style('superfishnavbar', get_template_directory_uri() . '/superfish-css/superfish-navbar.css', array( 'superfishvert' )); |
19 |
|
20 |
// Enqueue superfishnavbar, we don't need to enqueue any others in this case either, as the dependencies take care of it
|
21 |
wp_enqueue_style('superfishnavbar'); |
22 |
}
|
23 |
?>
|
Step 4 Class Setting
Search the line shown below and change as indicated. This way, we make WordPress to use the Superfish version for the main menu:
1 |
|
2 |
// Change from this: |
3 |
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
|
4 |
|
5 |
// To this: |
6 |
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'sf-menu', ) ); ?> |
Step 5 Creating a Menu
Make and save a menu system in the WordPress admin, then it will show up in the appropriate part of the site. The picture below shows the site before the menu added:
Step 6 Menu Added
After the menu is added:
Step 7 Styling
Modify the Superfish styles to match the Twenty Eleven theme. The file is called superfish.css. Below are the details:
1 |
|
2 |
/* Change this: */
|
3 |
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ |
4 |
color: #13a; |
5 |
}
|
6 |
.sf-menu li { |
7 |
background: #BDD2FF; |
8 |
}
|
9 |
|
10 |
/* To this: */
|
11 |
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ |
12 |
color: #999; /*#13a;*/ |
13 |
}
|
14 |
.sf-menu li { |
15 |
background: #ccc;/*#BDD2FF;*/ |
16 |
}
|
1 |
|
2 |
/* Change this: */
|
3 |
.sf-menu li:hover, .sf-menu li.sfHover, |
4 |
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { |
5 |
background: #CFDEFF; |
6 |
outline: 0; |
7 |
}
|
8 |
|
9 |
/* To this: */
|
10 |
.sf-menu li:hover, .sf-menu li.sfHover, |
11 |
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { |
12 |
background: #eee; |
13 |
outline: 0; |
14 |
color: #111; |
15 |
}
|
1 |
|
2 |
/* Change this: */
|
3 |
.sf-shadow ul { |
4 |
background: url('../images/shadow.png') no-repeat bottom right; |
5 |
padding: 0 8px 9px 0; |
6 |
-moz-border-radius-bottomleft: 17px; |
7 |
-moz-border-radius-topright: 17px; |
8 |
-webkit-border-top-right-radius: 17px; |
9 |
-webkit-border-bottom-left-radius: 17px; |
10 |
}
|
11 |
|
12 |
/* To this: */
|
13 |
.sf-shadow ul { |
14 |
/*background: url('../images/shadow.png') no-repeat bottom right;
|
15 |
padding: 0 8px 9px 0;
|
16 |
-moz-border-radius-bottomleft: 17px;
|
17 |
-moz-border-radius-topright: 17px;
|
18 |
-webkit-border-top-right-radius: 17px;
|
19 |
-webkit-border-bottom-left-radius: 17px;*/
|
20 |
}
|
Step 8 Finished Version
Here is how it will look like when it's finished:
By
