Jekyll Responsive Side Menu

   
   
 responsive  css  
 ssg  
Table of Content

This is a three-parts article. There are few sections here.

Table of Content

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.