Sidebar Menu like Off Canvas

1

Hey all,

has anybody managed to implement a vertical sidebar menu (not primary navigation) as in Bootstraps Off Canvas template: Bootstrap 3 Off Canvas Template?

gfaw20071

2

Youā€™ll need to create a new nav walker (you can see an example in Roots in lib/nav.php) that uses that markup.

3

thanks Ben,

so basically Iā€™d duplicate the nav walker and give it another name, such as Roots_Sidebar_Nav_Walker?

Just had a closer look at the Off-Canvas concept. Itā€™s nice, but actually I was just looking for a way to have an ā€œout-of-the-box nice lookingā€ sidebar menu like the one in the roots gallery: roots gallery

But thatā€™s just a link list, is it? Iā€™ve tried the Individual Menu Widget, but that just gives an unformated list.

4

Did you get to do it?

More or less the same:
I want a similar navigation as wordpress dashboard or smashing mag have, I mean:

  • A vertical menu wich is allways 100% height
  • It collapses on resizing and it slides from left clicking toggle

IĀ“ve been stucked with this for days and IĀ“ve followed a the tutorials IĀ“ve found and nothing solid comes out, its possible obviously but i canĀ“t get it working. I see roots gallery has the same I want but I want to make the menu keep vertical and slide from the left pushing the contentā€¦

Any Idea?

5

Sorry for responding late. Actually I had not fully understood the Off Canvas concept, when I posted this. I was looking for a secondary sidebar menu. What I did was setting up an additional menu, used it with the custom-menu widget for sidebars (default) and looked up the CSS in the Bootstrap documentation and applied them to it respectively.

As for what you are looking for - no idea other than going through the CSS and .js of the Off-Canvas template in Bootstrap and/or try again with the tutorials. Debugging is tedious workā€¦ :frowning:

6

I imagine this has been done already and better than my offering, but in case itā€™s of use to anyone:

Hereā€™s a fork of bootstrap-nav-walker that implements a fairly nice Bootstrap Drawer.

It only works to one level of indentation as of this writing. Suggestions and other useful input welcome, as always.

1 Like
7

Been using Materialize for this with something like this:

		    <nav id="site-navigation" class="main-navigation nav-primary navbar-default" role="navigation">
    		
    			<a href="#" data-activates="mobile-nav" class="button-collapse">Menu</a>
    
    			<?php wp_nav_menu( array(
    			'menu'              => 'primary',
    			'theme_location' => 'primary_navigation',
    			'menu_class' => 'menu side-nav',
    			'menu_id' => 'mobile-nav',
    			'items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>',
    			) ); ?>
    					
    			<?php wp_nav_menu( array( 'theme_location' => 'primary_navigation', 'menu_class' => 'hide-on-med-and-down right' ) ); ?>
    
    		</nav>
2 Likes
8

Cool. Materialize looks great. I still have so much to learn about Bootstrap. A good deal behind the curve here. Thanks.

9

Bit silly though that you have to duplicate the navigation ul markup:
To use this in conjunction with a fullscreen navigation, you have to use two copies of the same UL.
http://materializecss.com/side-nav.html

10

This is the same principle as the bootstrap nav walker and most other mobile menus. When I first saw it, I thought it looked like ā€˜wetā€™ code too, but the above is the simplest method Iā€™m aware of for WP (and doesnā€™t actually duplicate the UL in the way shown in that Materialize example). Having said that, addressing the original question, it is easy to do a full height column in CSS with flex box, so maybe thereā€™s an even more straightforward pure CSS solution now?

1 Like