0

更新

通过将以下内容添加到“站点菜单”和“容器”样式中，我能够将侧面导航项目堆叠起来：

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

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

原帖

我正在使用 flexbox 和Off-Canvas 菜单教程来创建一个可悬停的侧导航菜单。

当按下选项卡时，我希望该弹性项目滑到屏幕上并位于最前面。我可以滑动到屏幕上，这是导致问题的堆叠顺序。如何更改弹性项目的堆叠顺序或根据单击的选项卡在显示的内容之间切换？该图像应有助于澄清：

图像 - 关闭画布菜单的 Flexbox

这是我目前为该网站工作的链接： LINK

我已经看到使用 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>

任何指导将不胜感激。

4

1 回答 1

0

我对您的代码进行了一些更改以使堆叠顺序正常工作。我将数据属性添加到选项卡并使用 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');
    }
  });
});

看看小提琴。

于 2018-07-05T03:29:08.993 回答