Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 
ssg  


One of the challenge in maintaining blogsite is creating design template for each use case. I’m planning to have a blog template, tutorial template, maybe screenshot template, and perhaps design gallery. All of them should be responsive using a chosen framework.


Goal

A Jekyll left sidebar menu using bootstrap framework

In this case, In short, I need: a button toggle to display or hide sidemenu.

Jekyll Bootstrap Opened Side Menu Button


Requirement

Let’s see the show case in figure below:

  • Side menu always visible in medium screen. No button visible.

  • Side menu is not visible in small screen.

  • Side menu in small screen can be activated using toggle button.

Jekyll Bootstrap Opened Side Menu Button

Button

There are many ways to display button. I like using FontAwesome character as button.

<a href="#" id="menu-toggle"><i class="fa fa-navicon fa-2x"></i></a>

I’m using visible-xs-*. It means the button only appear in extra small screen. This button always appear in small screen..

I also use col-xs-12. It will take all the grid space.

  <div class="col-xs-12 visible-xs-block">
      &nbsp;&nbsp;
      <a href="#" id="menu-toggle">
        <i class="fa fa-navicon fa-2x"></i>
      </a>
  </div>

This is the menu part with id=“sidebar” that can be displayed or hidden using javascript.

This menu part is visible in small, medium and larger screen, but hidden in extra small screen using hidden-xs-*.

  <div class="col-xs-11 col-sm-4 col-md-3 hidden-xs" id="sidebar">
  {% include layout/sidemenu.html 
    menusource = site.data.navigation_wm
  %}
  </div>

JQuery Javascript

  $('#menu-toggle').click(function() {
      $('#sidebar').toggleClass('hidden-xs');  
  });

When #menu-toggle clicked, #sidebar will lose its hidden-xs class, and become visible.

Content

Bootstrap is using 12 based grid. So I arrange the width for each screen device as below

  • Medium: 3 Left + 9 Right = 12 Total

  • Small: 4 Left + 8 Right = 12 Total

  • Extra Small: 11 Left + 12 Right = Become Top and Bottom

  <!-- sidebar left col -->
  <div class="col-xs-11 col-sm-4 col-md-3 hidden-xs" id="sidebar">
  {% include layout/sidemenu.html 
    menusource = site.data.navigation_wm
  %}
  </div>
  <!-- /sidebar -->
  
  <!-- main right col -->
  <div class="col-xs-12 col-sm-8 col-md-9" id="main"> 
    {{ content }}
  </div>
  <!-- /main -->

CSS

Boostrap is more than enough. No custom css trick required.

Complete Code

See in github

That’s all.