Нужна помощь с переключателем меню Off-Canvas Flexbox / z-index

Question

ОБНОВИТЬ

Мне удалось собрать элементы боковой навигации, добавив следующее в стили "site-menu" и "container":

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

остается только заставить контент правильно переключаться на основе нажатой вкладки.

Оригинальный пост

Я использую flexbox и учебник по меню Off-Canvas для создания меню sidenav.

Когда вкладка нажата, я хочу, чтобы этот гибкий элемент скользил по экрану и был в первых рядах. У меня скользящее на экране работает, это порядок укладки, что вызывает проблемы. Как изменить порядок наложения элементов Flex или переключаться между отображаемыми на основе нажатой вкладки? Изображение должно помочь уточнить:

Изображение - Flexbox Off Canvas Menu

Это ссылка на то, что я сейчас работаю на сайте: ССЫЛКА

Я видел примеры использования css и javascript для изменения порядка наложения, но я не могу понять, как заставить его работать с элементами flexbox.

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>

Любое руководство будет оценено.

Answer 1

Я сделал несколько изменений в вашем коде, чтобы получить порядок размещения. Я добавил атрибуты данных на вкладки и использовал jQuery, чтобы использовать значение атрибутов, чтобы скрыть или показать контейнер. Поскольку нажатие на вкладку меняет содержимое, я не хотел закрывать холст при нажатии на вкладки, поэтому вместо этого я использую указатель мыши, чтобы открыть холст.

Вот новый код jQuery для изменения видимого контейнера:

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

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

Посмотрите на скрипку.