Vertical Accordion Menus

[adampatterson]

Using Bootstrap 3

After a lot of searching, I was unable to find a Bootstrap compatible solution that did not require a bunch of external modifications to the walker class.

I would like to make vertical menus using Bootstrap but as an accordion. While you can stack nav pills, any child page shows up as a dropdown menu.

Is this something that your walker could optionally handle?

[pattonwebz]

Hey @adampatterson,

I have never used the walker to make accordion menus. Mainly this walker handles nav elements for navbars with some basic support for other menus.

I can't remember the markup for accordion style menus but are you meaning menus similar to the right side menu found on this docs page: https://getbootstrap.com/docs/3.3/components/#nav ?

[adampatterson]

I haven't had a lot of luck :( I check the bootstrap documentation and an accordion menu isn't really something they seem to support.

Thanks for the reply, I will keep trying.

[pattonwebz]

Indeed I kind of expected to see something in the docs about accordion menus such as these but on a quick scan I did not see anything about them.

I think you can possibly make a menu like that though with a minimal custom walker or maybe even with standard wp_nav_menu() call and a few lines of custom JS for opening and closing items. Give me another shout if you still have no luck finding something that can do this for you and I will try get a little time to write up something custom for it.

[codysnodgrass]

I was able to vertical menus using the walker...here is a screen shot of the finished product (https://imgur.com/a/lCLsd). NOTE: The items with drop-downs don't link the menu item that gets the caret. The walker removes that link and makes it a dummy link.

Here is the code I used in my page:

Toggle navigation

$menuID, // This is where you enter your menu ID or menu name like normal wp_nav_menu entries. 'depth' => 3, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-3', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker()) ); ?>

Here is my CSS styling:

.vertical-menu .navbar { border-radius: 0; } .vertical-menu .navbar-inverse { background: none; border: none; } .vertical-menu .dropdown-menu { border-radius: 0; }

.vertical-menu .navbar-header, .vertical-menu .navbar-nav, .vertical-menu .navbar-nav > li { float: none; } .vertical-menu .navbar-nav { margin: 0; } .vertical-menu .navbar-collapse { padding-left: 0; padding-right: 0; } .vertical-menu .dropdown-menu { position: static; float: none; min-width: 0; } .vertical-menu .dropdown-submenu .dropdown-menu { border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; } .vertical-menu .dropdown-menu > li > a { white-space: normal; } .vertical-menu .navbar-inverse .navbar-nav > .active > a, .vertical-menu .navbar-inverse .navbar-nav > .active > a:hover, .vertical-menu .navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background-color: #3398b6; } .vertical-menu .navbar-header, .vertical-menu .navbar-nav, .vertical-menu .navbar-nav > li { background: none; } .vertical-menu .navbar-inverse .navbar-nav > li > a { font-size: 15px; color: #0F2E36; } .vertical-menu .navbar-inverse .navbar-nav > li > a:hover, .vertical-menu .navbar-inverse .navbar-nav > li:hover > a.dropdown-toggle { background: #DDD; }

.vertical-menu .dropdown-menu > .active > a, .vertical-menu .dropdown-menu > .active > a:hover, .vertical-menu .dropdown-menu > .active > a:focus { background: #3398b6 !important; }

[adampatterson]

Thanks for Sharing @codysnodgrass Looks a lot like my implementation.

I definitely found that Bootstraps styling and structure were not the best for this sort of menu but it did work.

I also looked more closely on the Bootstrap site and a vertical menu with subpages isn't something they really support.