«

»

Print this Post

jQuery drop down menu in Graphene Theme

Drop down menus in the Graphene Theme works absolutely fine. But it shows sub menu items immediately when you hover on parent menu item. You can enhance the drop down menu UX with some jQuery animation. Follow this post to have a jQuery drop down menu in your site powered by the Graphene Theme

Note: The scripts I mention here need to be added to child theme of Graphene Theme. So, if you’re not yet using a Child Theme yet, get it here.

Here is the jQuery script for header menu drop down menu.

jQuery(document).ready(function($){
	$('#header-menu li').hover(function(){
	$('.sub-menu',this).css("display","none");
	});
 
	$('#header-menu li').hover(function(){
	$('.sub-menu',this).stop(true,true).slideToggle(500);
	});
});

First we need to hide the sub menu on mouseover using .css() function. Otherwise .slideToggle() will not work for the first time. (You’ll just see the plain drop down menu.) Then we use .slideToggle() to show the drop down menu items on mouse hover. The time within .slideToggle() function represents the execution time in milliseconds. Larger the number slower will be the animation. I’ve tested this in header menu up to 3 levels deep, and it works just fine.

You can add this to your site in two ways. Create a file called drop-down-menu.js inside your child theme and add the above code to it. Then enqueue the js file. Add the below code to your child-theme’s functions.php, anywhere between <?php and ?> to enqueue the js file.

function graphene_jquery_dd_menu() {
    if ( ! is_admin() ){
	wp_enqueue_script(
		'jquery-drop-down-menu',
		get_stylesheet_directory_uri() . '/drop-down-menu.js',
		array('jquery')
	);
    }
}
add_action('wp_enqueue_scripts', 'graphene_jquery_dd_menu');

Or, you can hook this script to wp_footer() action. Add this code to child-theme’s functions.php anywhere between <?php and ?>.

function graphene_jquery_dd_menu_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
	$('#header-menu li').hover(function(){
	$('.sub-menu',this).css("display","none");
	});
 
	$('#header-menu li').hover(function(){
	$('.sub-menu',this).stop(true,true).slideToggle(500);
	});
});
</script>
<?php
}
add_action('wp_footer','graphene_jquery_dd_menu_script');

If you want the jQuery drop down menu for secondary menu, replace #header-menu li with #secondary-menu li.i.e

jQuery(document).ready(function($){
	$('#secondary-menu li').hover(function(){
	$('.sub-menu',this).css("display","none");
	});
 
	$('#secondary-menu li').hover(function(){
	$('.sub-menu',this).stop(true,true).slideToggle(500);
	});
});

If you want jQuery drop down menu for both header and secondary menus, just add #secondary-menu li after #header-menu li separated by a comma, like this,

jQuery(document).ready(function($){
	$('#header-menu li, #secondary-menu li').hover(function(){
	$('.sub-menu',this).css("display","none");
	});
 
	$('#header-menu li, #secondary-menu li').hover(function(){
	$('.sub-menu',this).stop(true,true).slideToggle(500);
	});
});

You can see the jQuery drop down menu in this page itself! Just hover on WordPress Plugins, or Downloads menu items. If you have any questions or suggestions, leave a comment here or open a topic in Graphene Theme support forum.

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

Permanent link to this article: http://www.prasannasp.net/jquery-drop-down-menu-in-graphene-theme/

2 comments

1 ping

  1. Luko

    This is so simple and effective. Thanks for this one.
    I recommend to hook the script in wp_footer() cause it’s 10 sec work :).
    The article is great also, because you described each line of code so I can understand what is happening, and learn some jquery along while.
    Nice work!

  2. Luko Del Ponte

    Hy,

    I have one question. How to set sliding backwards when moving mouse away from menu? Something like “onmouseout” event.
    How to update that js code to scroll the submenu back when the mouse is away from “menu”.

    I apologize for disturbing but I really stuck with this…

  1. Tweaking previous and next post links in Graphene Theme » Prasanna SP

    […] separate .js file and enqueue it properly. I’ve explained enqueueing scripts on WordPress in this post. So, I’m not gonna repeat it here. Just follow that post. Note that if you’re going to […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close