WordPress Vertical Accordion Menu

Description

This code creates a vertical accordion menu with automatic generates list item using WordPress code. simply replace child of “1191” to the children that you wish to display. Also make sure to download “jquery.cookie.js” file which helps the browser to remember which list item is open

This code creates a vertical accordion menu with automatic generates list item using WordPress code. simply replace child of “1191” to the children that you wish to display. Also make sure to download “jquery.cookie.js” file which helps the browser to remember which list item is open

HTML Source Code

                        
                          <div class="accordion">
<ul id="nav">
	    <?php $args = array(
	'depth'        => 0,
	'show_date'    => '',
	'date_format'  => get_option('date_format'),
	'child_of'     => 1191,
	'exclude'      => '',
	'include'      => '',
	'title_li'     => '',
	'echo'         => 1,
	'authors'      => '',
	'sort_column'  => 'menu_order, post_date',
	'link_before'  => '',
	'link_after'   => '',
	'walker' => '' ); ?>

<?php wp_list_pages( $args ); ?> 
</ul>
</div>

CSS Source Code

                        
                          /*Vertical Accordian Menu Start*/
ul{list-style: none; padding: 0; margin: 0;}

.accordion ul li{
    list-style-image: url("http://allinonegeek.com/images/Add-icon.png");
}

.page_item .children li {
    list-style: none outside none;
}

#nav {
    float: left;
    margin: 15px 0 15px 23px;
    width: 280px;
}

#nav li a {
    color: #CC502F;
    display: block;
    font-size: 16px;
    padding-left: 0px;
    text-decoration: none;
}

#nav li a:hover, #nav li a.active {
    color: #313741;
}

#nav li ul {display: none;}

#nav li ul li a {
    padding-left: 0;
}
/*Vertical Accordian Menu End*/

JavaScript Code

                        
                          <!--Disable WordPress Parent List Items Start-->
<script type="text/javascript">
jQuery(function($) {
$(".children").parent().children("a").attr('href', "javascript:void(0)");
});
</script>
<!--Disable WordPress Parent List Items End-->


<script>
$(document).ready(function () {
  var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
	$('#nav > li > a:eq('+checkCookie+')').addClass('active').next().show();
  }
  $('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
	  $.cookie("nav-item", navIndex);
	  $('#nav li ul').slideUp();
	   if ($(this).next().is(":visible")){
		   $(this).next().slideUp();
	   } else {
	   $(this).next().slideToggle();
	   }
	   $('#nav li a').removeClass('active');
	   $(this).addClass('active');
  });
});
</script>


Post Categories

Tags