On this article, I would like to share on how to add a Superfish menu jQuery plugin to a theme.
Target Audience
This article is intended to the people who have knowledge in WordPress theme development, HTML, PHP, CSS, and Javascript using jQuery framework.
Requirements
- jQuery Superfish Plugin. Get this script from this site. Get this file in ZIP format, it contains the examples and the script itself.
- Any WordPress Theme. Any WordPress theme will do for the modification. I will use Twenty Eleven theme as an example.
Step 1: Directory Changes
Under twentyeleven folder, upload the Superfish jQuery plugin (superfish.js) to js folder (The path is twentyeleven/js).
Next, still under js folder, create a file called menubar.js. We will add the code later on.
Step 2: File Modifications
Open the functions.php file under twentyeleven folder. Insert the following code at the end of the line (after add_filter function to add classes in <body> tag).
function twentyeleven_enqueue() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-superfish', get_template_directory_uri() . '/js/superfish.js'); wp_enqueue_script('jquery-menubar', get_template_directory_uri() . '/js/menubar.js'); } add_action('init', 'twentyeleven_enqueue'); |
Next, open the menubar.js file under twentyeleven > js folder. Insert the following code.
function tutorial_superfish() { jQuery('.menu > ul').superfish({ delay: 1000, // one second delay on mouseout animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation speed: 'fast', // faster animation speed autoArrows: false, // disable generation of arrow mark-up dropShadows: false // disable drop shadows }); } jQuery(document).ready(function() { jQuery.noConflict(); tutorial_superfish(); }); |
And finally, open the style.css, under twentyeleven folder, and at line 600, replace the line of code from this:
#access li:hover > a, #access ul ul :hover > a, #access a:focus { background: #efefef; } #access li:hover > a, #access a:focus { background: #f9f9f9; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -o-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737; } #access ul li:hover > ul { display: block; } #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a { font-weight: bold; } |
to this
#access li:hover > a, #access ul ul :hover > a, #access li.sfHover, #access ul ul .sfHover, #access a:focus { background: #efefef; } #access li:hover > a, #access li.sfHover > a, #access a:focus { background: #f9f9f9; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -o-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737; } #access ul li:hover > ul, #access ul li.sfHover > ul { display: block; } #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a { font-weight: bold; } |
Basically, you simply add the .sfHover class on hover events to have the Superfish working.
Themes in Action
Almost all WordPress themes made by Padd Solutions uses Superfish Menu jQuery plugin. So if you want to explore how it uses, pick any theme to download.
There are a good number of premium themes which uses Superfish Menu jQuery plugin. They are the following:
Comments
There are no comments on this entry.