需要帮助w/离开画布Flexbox菜单切换/z-索引

Question

更新

通过在“站点菜单”和“容器”样式中添加以下内容，我能够获得侧导航项堆栈：

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

剩下的唯一方法就是让内容根据单击的选项卡正确切换。

原始邮政

我正在使用flexbox和画布外菜单教程创建一个可悬停的侧菜单。

当一个选项卡被按下时，我想让这个灵活的项目滑到屏幕上，站在最前面。我已经滑到屏幕上工作了，是堆叠顺序造成了问题。如何更改flex项的堆叠顺序，或者根据单击的选项卡在显示的内容之间切换？该图像应有助于澄清：

图片-画布菜单上的Flexbox

这是一个链接，指向我目前为该站点工作的内容：链接

我已经看到了使用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');
    }
  });
});

看一看小提琴。