Sidebar Menu: Main Navigation Reference

Documentation:

This code references the main navigation and shows only the pages that are associated with the siblings of the page’s current parent. This sidebar menu can be seen on http://seacal.org/services/.

HTML:

<div id="sidebar-nav"> <?php wp_nav_menu( array( 'theme_location' => 'main-nav' ) ); ?> </div>

CSS:

/* Sidebar Navigation */ #sidebar-nav { margin-bottom: 20px; } #sidebar-nav .menu, #sidebar-nav .menu li { list-style-type: none; } #sidebar-nav .menu { padding: 0; margin: 0; } #sidebar-nav ul.sub-menu { padding: 0; margin: 0; } #sidebar-nav ul.menu > li { display: none; } #sidebar-nav ul.menu > li.current-menu-parent { display: block; border: none; padding: 0; } #sidebar-nav ul.menu > li.current-menu-parent > i { display: none; } #sidebar-nav, #sidebar-nav li.menu-item-has-children > a, #sidebar-nav .sub-menu { float: left; width: 100%; } #sidebar-nav li.menu-item-has-children > a { display: none; } #sidebar-nav li:first-child { border-top: 1px solid black; padding-top: 10px; } #sidebar-nav li i { position: absolute; right: 5px; top: 8px; font-size: 28px; color: #3b95c5; } #sidebar-nav li { padding: 10px 0; list-style: none; position: relative; border-bottom: 1px solid black; padding-right: 30px; } #sidebar-nav li a { font-family: $header-font-stack; font-size: 18px; } #sidebar-nav li.current-menu-item a { color: #3b95c5; }

JS:

$( document ).ready(function() { $("#sidebar-nav ul li").append(""); });