Wordpress: creating a vertical expandable menu of pages

I’ve been searching the past few days for a good plugin to generate a jquery based expandable vertical menu of pages in WordPress, but there just doesn’t seem to be one out there.
So I thought I’d document how I created my own.

(Thanks for initial idea from http://www.mathachew.com/sandbox/collapsible-menu/)

In functions.php: wp_enqueue the jquery file (the proper way to add jquery to WordPress!):
function my_init_method() {
    if (!is_admin()) {
        wp_deregister_script( ‘jquery’ );
        wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js’);
        wp_enqueue_script( ‘jquery’ );
    }
}
add_action(‘init’, ‘my_init_method’);

In header.php add the following jQuery:

$(document).ready(function()
        {//if there is a sub menu
            $(‘#leftMenu ul li.page_folder’).addClass(“expanded”);
            $(‘#leftMenu ul > li.page_folder > a’).before(‘ ‘);
            setTimeout(function() {
                // Slide
                $(‘#leftMenu ul > li > a.expanded + ul’).slideToggle(‘medium’);
                $(‘#leftMenu ul > li > a.btn’).click(function() {
                    $(this).parent().toggleClass(‘expanded’).toggleClass(‘collapsed’).find(‘> ul’).slideToggle(‘medium’);
                });
              }, 250);
        });

In the sidebar.php add the following (assuming a left hand vertical menu which gets just the hierachy of pages around the current one in that branch)

$parentPost = get_post($post->post_parent); $grandparent = $parentPost->post_parent;  if($grandparent)     $children = wswwpx_fold_page_list(“title_li=&child_of=”.$grandparent.”&echo=0&sort_column=menu_order”,true); elseif($post->post_parent)     $children = wswwpx_fold_page_list(“title_li=&child_of=”.$post->post_parent.”&echo=0&sort_column=menu_order”,true); else     $children = wswwpx_fold_page_list(“title_li=&child_of=”.$post->ID.”&echo=0&sort_column=menu_order”,true); echo $children; ?>

Note; I’m using the fold_page plugin for WordPress but you could *probably* use wp_list_pages()

In the styles.css stylesheet add the following:

#leftMenu {
    padding:0px;
    margin:0 0 0 0px;
    float:left;
    width: 200px;
    border:1px solid #fff;
}
#leftMenu ul{
    list-style:none;
    font-size:0.9em;
    margin:0;
    padding:0;
}

#leftMenu ul.level0{
    border-top:5px solid #00C4F5; /*CVP Bright Blue*/;
    border-bottom:5px solid #00C4F5; /*CVP Bright Blue*/;
}
#leftMenu ul li{
    display:block;
    position:relative;
}
#leftMenu ul li a{
    display:block;
    height:30px;
    line-height:30px;
    padding: 0 10px;
        border-top:2px dotted #00C4F5; /*CVP Bright Blue*/;

}
#leftMenu ul li ul li a{
    padding: 0 10px 0 30px;
        height:25px;
    line-height:25px;
}
#leftMenu ul li.current_page_item > a,#leftMenu ul li a:hover{
    background-color:#D1EEF9; /*CVP Pale Blue*/;
}
#leftMenu ul a.btn {width:13px; height:13px;display:block;clear:both;position:absolute; padding:0;
right:10px;top:10px;border:0; overflow:none;}
#leftMenu ul a.btn:hover{ background-color:transparent;}
#leftMenu ul li.expanded a.btn {background-image:url(images/bgArrowDown.png); background-position:-6px -15px;}
#leftMenu ul li.collapsed a.btn {background-image:url(images/bgArrowLeft.png); background-position:-6px -15px;}

You’ll also need a down arrow & left/right arrow icon. Clearly you can change the styles to suit your theme, but you can get the basic idea.
Note: I only need this to show 2 levels of drop downs – I’m sure it can be customised to have an infinite hierarchy – let me know how you do it if you succeed!
(link to live site to follow soon…)

WordPress: creating a vertical expandable menu of pages

Back to Blog

Testimonials