Question

我提出以下实施方案，以便侧面菜单正常工作

https://jsbin.com/getotijela/edit?html,css,output

HTML：

<link rel="stylesheet" type="text/css" href="main.css">

<div class="container">
<div class="menu">
    a
</div>

<div class="content">
    <span id="clickable">
        basdasdasdasdas
    </span>
</div>
<div>

<script>

document.getElementById("clickable").addEventListener('click',function(){
    var el = document.getElementsByClassName("menu")[0]
    el.className  = "menuClosed"
})

</script>

CSS：

.test{
    background-color:red;
}

.container{
    display:flex;
    flex-direction: row;
    position:relative;
    height:100%;
}

.menu{
    width:200px;
    /* left:20px; */
    background-color:red;
}

.menuClosed{
    width:0px;
    background-color:red;
    transition: 0.3s all;
}


.content{
    background-color:yellow;
    flex:1;
}

但它的作用是将侧面菜单折叠为width 0（正如我指示的那样）。我的目标是：让sidemenu向左移动尽可能多的单位和宽度，这可以通过修改left css属性来实现。

换句话说，我不希望菜单折叠到宽度为0，只是让它移出视线

如果有的话，我怎样才能实现类似于flexbox的东西呢？

Answer 1

@PossessWithin为什么你会使用translateX？

您应该使用flexbox-shrink和flexbox-based属性，特别是针对这些情况。

我在这里做了一个小提琴，JSFiddle

<aside class="sidebar is-visible">
    <p class="sidebar-content">
      Put all your content inside of here since this keeps the width of your sidebar <br>(so a div with the width       you want the sidebar to be).
    </p>
  </aside>
  <main class="content">
    <button class="toggle-sidebar">Toggle sidebar</button>
    <p>
      scale this content
    </p>
  </main>

CSS

*{
    box-sizing: border-box;
}

html, body  {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: flex-end;
}

.content {
  display: flex;
  min-height: 0;
  flex-direction: column;

  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
}


.sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;

  height: 100%;
}

.sidebar.is-visible  ~ .content {
  flex-basis: 0;
}

/* Animation */
.content {
  transition: flex-basis .1s cubic-bezier(.465, .183, .153, .946);
  will-change: flex-basis;
}

.sidebar.is-visible  ~ .content {
  transition: flex-basis .3s cubic-bezier(.465, .183, .153, .946);
}


.sidebar-content {
  display: block;
  width: 300px;
  background-color: #eee;
  height: 100%;
  margin: 0;
  padding: 20px;
  border-right: 1px solid #ccc;
}

.content {
  padding: 20px;
}

请对此进行投票，因为它应该按照预期的方式进行。

Answer 2

请试试这个：

<强> HTML：

<link rel="stylesheet" type="text/css" href="main.css">

<div class="container">
<div class="menu">
    a
</div>

<div class="content">
    <span id="clickable">
        basdasdasdasdas
    </span>
</div>
<div>

<强> CSS

.test{
    background-color:red;
}

.container{
    display:flex;
    flex-direction: row;
    position:relative;
    height:100%;
}

.menu{
    width:200px;
    transition: 0.3s all ease-in-out;
    background-color:red;
}

.menuClosed{
    background-color:red;
    transition: 0.3s all ease-in-out;
    transform: translateX(-200px);
    margin-right: -200px;
}

.content{
    background-color:yellow;
    flex:1;
}

我已经更改了＆＃34; menuClosed＆＃34;通过变换将它移动到左侧：translateX（-200px）。为了使屏幕向右移动，我添加了相同大小的负边距。

这可能不是最好的做法 - 我很开心听取其他解决方案！

此外，作为一个加号，我已更改您的Javascript代码以切换类，使其可以在点击时打开和关闭，而不是仅打开。

您可以看到new code here, on Codepen。我希望它可以帮到你！

Flexbox侧面菜单

2 个答案: