Jquery Drop Down Menu for WordPress

Step 1: Jquery

The following script contains comments explaining which jQuery actions are being performed.

$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

	$("ul.topnav li span").click(function() { //When trigger is clicked...

		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

Step 2: CSS

/* Top Menu */

ul.topmenu {    list-style: none;padding: 0;margin: 0;float: left;width: 100%;    background: #205528;font-size: 1.2em; height: 34px;  }

ul.topmenu li {    float: left;    margin: 0;    padding: 0 5px;    position: relative; }

ul.topmenu li a{    padding: 10px 5px;    color: #fff;    display: block;    text-decoration:bold;    float: left;}

ul.topmenu li a:hover{  text-decoration:underline;opacity:0.6;}

ul.topmenu li .select a{    background: #ffffff;    color:#016CA3;    }

ul.topmenu li a:focus{    background: #ffffff;    color:#016CA3;   }

/*–Drop down trigger styles–*/

ul.topmenu li span {     width: 10px;    height: 20px;    float: left;    margin:5px ;

background:url(http://ossbooks.com/wp/wp-content/uploads/2010/04/more_icon.png) no-repeat center;

}

ul.topmenu li span.sub :hover {background:#016CA3; cursor: pointer;opacity=90; } /*–Hover effect for trigger–*/

ul.topmenu li ul.subnav {list-style: none;position: absolute; left: 0; top: 30px;background: #333;margin: 0; padding: 0;

display: none;    float: left;    width: 160px;    z-index:1000;    border: 1px solid #A5C2E3;}

ul.topmenu li ul.subnav li a:hover{background:#6bc044 url(http://ossbooks.com/wp/wp-content/uploads/2010/02/dropdown-on.gif) no-repeat 7px 8px;}

ul.topmenu li ul.subnav li{margin: 0; padding: 0;border-bottom: 1px solid #A5C2E3; clear: both;    width: 160px;}

html ul.topmenu li ul.subnav li a {float: left;    width: 140px;background: #fff url(http://ossbooks.com/wp/wp-content/uploads/2010/02/dropdown-off.gif) no-repeat 10px center;   color: #333;padding:10px 0 10px 20px;}

html ul.topmenu li ul.subnav li:hover { background: #222;}

/* Top Menu End*/

Step 3: HTML&PHP

<div>

<ul>

//acc_id refers category id

<?php $acc_id = “29,9,12,11,13”; $accids = explode(“,”, $acc_id);

//Get size of array

$asize=sizeof($accids);

for($i=0; $i<$asize; $i++)

{

$display=get_cat_name($accids[$i]);

echo  “<li><a>”.$display.”</a>”; ?>

<ul><?php wp_list_categories(‘orderby=id&show_count=0&use_desc_for_title=0&child_of=’.$accids[$i].’&title_li=’);?></ul>

</li>

<?php } ?>

</ul>

</div>

DEMO

Advertisements
Posted in Tips. Tags: , , . 3 Comments »

3 Responses to “Jquery Drop Down Menu for WordPress”

  1. Jquery Drop Down Menu for Wordpress « A DotNet Intellectualism | Source code bank Says:

    […] here: Jquery Drop Down Menu for WordPress « A DotNet Intellectualism If you enjoyed this article please consider sharing […]

  2. Mathias Says:

    I was recommended this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem. You’re
    incredible! Thanks!

  3. nail fungus Says:

    I was curious if you ever thought of changing the layout of your blog?
    Its very well written; I love what youve got to
    say. But maybe you could a little more in the way of content so
    people could connect with it better. Youve got an awful lot of text for only having one or 2 images.
    Maybe you could space it out better?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: