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

Jquery Featured Post Slideshow

Steps

1. use wp_enqueue_script to load the Jquery that is packaged with WordPress.
2. go over how Jquery Cycle works and make The Loop generate the necessary XHTML
3. make a custom query to load only the posts we want
4. configure Jquery Cycle to run the slideshow

Download preview

1. Enqueue Jquery

The first thing you want to do is to get Jquery to load WordPress comes with a version of Jquery included so its generally best to load that> The function to load javascript libraries and plugins is wp_enqueue-script. The code to load the jQuery and the jQuery Cycle plugin is below

<?php wp_enqueue_script('jquery.cycle.all.min','/wp-content/themes/upsidedowncity_v_3/jquery.cycle.all.min.js',array('jquery')); ?>
<?php wp_enqueue_script('jquery_script','/wp-content/themes/upsidedowncity_v_3/jquery_script.js'); ?>
<?php wp_head(); ?>


Place this code right above the “wp_head();” line your header.php file.
 Write the css code for featured post sideshow.


/*Featured Post Slide Show @asokkumar.t@gmail.com*/
#featured_posts{
width:960px;
margin-left:-10px;
height:140px;
}

#featured_posts h3{
font-size:12px;
width:255px;
}

#featured_posts ul{

}

#featured_posts ul li{
float:left;
margin:0 9px 0;
}

.slide_cont{
width:835px;
clear:none;
float:left;
margin:0 17px;
}

.slide_cont ul li h3 a, .slide_cont ul li h3 a:hover{
color:#fff;
}

.prev{
display:block;
width:35px;
height:75px;
background: url('images/left_arrow.png') no-repeat center;
cursor:pointer;
float:left;
margin:35px 0 0 10px;
}

.next{
display:block;
width:35px;
height:75px;
background: url('images/right_arrow.png') no-repeat center;
cursor:pointer;
float:right;
margin:35px 10px 0 0;
}

h1, h2, h3, h4, h5, h6{
color:#fff;
background:#000;
font-family:"courier new",courier;
padding:3px 0 3px 5px;
}


add the given php code at any place in your templete
/* PHP code*/

<div id="featured_posts">
<a></a>

<div>

<?php 
$containter = 1; 
$display = 1;
?>

  <?php $my_query = new WP_Query('category_name=featured');
  while ($my_query->have_posts()) : $my_query->the_post(); ?>

<?php
if (($containter == 1) and ($display >= 4)) {
        echo "<ul class='slides' style='display:none;'>";
        } elseif  ($containter == 1) {
        echo "<ul class='slides'>"; 
        } else {}
?>

<li>
        <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
         <a href="<?php the_permalink() ?>"><?php getImage('1'); ?> </a>
</li>

<?php 
$containter++; 
$display++;
?>

<?php
if ($containter >= 4) {
echo "</ul>"; $containter = 1;} else {}
?>

                <?php endwhile; ?>
</div> <!-- end #slide_cont -->

<a></a>
</div> <!-- end #featured_posts -->
Download preview