Need help w/ Off-Canvas Flexbox menu toggle / z-index

Question

UPDATE

I was able to get the side-nav items to stack by adding the following to the "site-menu" and "container" styles:

{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}

the only thing left is to get the content to switch properly based on the clicked tab.

Original Post

I am using flexbox and the Off-Canvas menu tutorial to create a hoverable sidenav menu.

When a tab is pressed I want that flex item to slide onto screen and be in the forefront. I have the sliding onto the screen working, it is the stacking order that is causing a problem. How can I change the stacking order of the flex items or toggle between what is shown based on the clicked tab? The image should help clarify:

Image - Flexbox Off Canvas Menu

This is a link to what I have working currently for the site: LINK

I have seen examples using css and javascript for changing the stacking order but I can't quite connect how to make it work with flexbox items.

CSS

#site-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

#site-canvas {
  width: 100%;
  height: 84vh;
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
    margin: 0 auto;
  padding: 0.8% 20px; /* Temp: Just spacing. */

    -webkit-box-shadow:inset 1px 1px 60px 5px rgba(100,100,100,0.5);
    box-shadow:inset 1px 1px 60px 5px rgba(100,100,100,0.5);

    display: flex;
    flex-wrap: wrap;
}

#site-menu {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -300px;
  /*background: #428bca;*/
  padding: 15px 0 15px 15px;
}

/* Animation */
#site-wrapper.show-nav #site-canvas {
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
}   

#sidenav span {
    display: flex;
    flex:auto;
    justify-content: flex-end;
    position: absolute; /* Position them relative to the browser window */
    left: -80px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 10px 15px; /* 15px padding */
    width: 140px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 20px; /* Increase font size */
    color: white; /* White text color */
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#sidenav span:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
    cursor: pointer;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}

#tabOne {
    top: 20px;
    background-color: #333333; /* Black */
}

#tabTwo {
    top: 20px;
    background-color: #666666; /* Black */
}

#tabThree {
    top: 20px;
    background-color: #999999; /* Black */
}

HTML

<div class="page">
  <div id="site-wrapper">
    <div id="site-canvas">
      <div id="mySidenav" class="toggle-nav sidenav">
        <span id="tabOne">
        <h4>Tab One </h4>
        <img alt="Tab Icon"/>
        </span>
        <span id="tabTwo">
        <h4>Tab Two </h4>
        <img alt="Tab Icon"/>
        </span>
        <span id="tabThree">
        <h4>Tab Three </h4>
        <img alt="Tab Icon"/>
        </span>
      </div>
      <div id="site-menu flex-container">
        <div class="container" id="tabOne">
          <div class="tabOne-flexItem">
            <h1>Tab One Content</h1>
            <p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
            <p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
          </div>
        </div>
        <div class="container" id="tabTwo">
          <div class="tabTwo-flexItem">
            <h1>Tab One Content</h1>
            <p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
            <p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
          </div>
        </div>
      </div>
      <div class="main_content">
        <div>
          Main Page Content Goes Here
        </div>
      </div>
    </div>
  </div>
</div>

Javascript

<script>
/* OFF CANVAS */
$(function() {
    "use strict";
  $('.toggle-nav').click(function() {

    toggleNav();
  });
});

/*========================================
=            CUSTOM FUNCTIONS            =
========================================*/
function toggleNav() {
"use strict";
if ($('#site-wrapper').hasClass('show-nav')) {
  // Do things on Nav Close
  $('#site-wrapper').removeClass('show-nav');
} else {
  // Do things on Nav Open
  $('#site-wrapper').addClass('show-nav');
}

}

</script>

Any guidance would be appreciated.

Answer 1

I made a few changes to your code to get the stacking order working. I added data attributes to the tabs and used jQuery to use the value of the attributes to either hide or show a container. Since clicking the tab changes the content, I didn't want to close the canvas when clicking tabs so instead I'm using hover to open the canvas.

Here is the new jQuery code to change which container is visible:

$( ".sidenav span" ).click(function() {
  var index = $(this).data('index');

  $( ".container" ).each(function(i) {
    if (i != index) {
        $(this).addClass('hidden');
    }
    else {
        $(this).removeClass('hidden');
    }
  });
});

Take a look at the fiddle.