Question

我正在尝试制作滑动汉堡包菜单，当选中复选框（图标）时，我无法将div移动到左侧。以下HTML：

<div class="nav">
    <div class="container">
        <img src="{{ asset('assets/images/user.jpg') }}">
        <a href="#">Sameer Manek</a>
    </div>
</div>
<div class="window">
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <label for="nav-trigger"><i class="fa fa-bars"></i></label>
    {% block main %}{% endblock %}
</div>

和CSS：

.nav-trigger:checked + label {
    left: 215px;
}

.nav-trigger:checked ~ .window {
    background-color: transparent;
    left: 200px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.nav-trigger + label, .window {
    transition: left 0.2s;
}

第一个和最后一个CSS正确应用，标签从当前位置向左移动，但div .window不是

Answer 1

代字号'~'不是父选择器（see this question and answers），CSS中当前没有父选择器（see this question and answers。）

您需要使用一些javascript来选择父元素。如果您已经在使用它，jQuery会让这很容易。

Answer 2

以下CSS不适合您，因为~不会影响DOM中的父元素。

.nav-trigger:checked ~ .window { }

除非你绝对不能完全用CSS完成任务，否则我不将JavaScript添加到一个东西中。在您的情况下，一个非常小的HTML更改将允许您保持纯CSS。

您必须安排HTML，以便.nav-trigger复选框和.window在DOM中处于同一级别。

HTML更改

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"><i class="fa fa-bars"></i></label>

<div class="window">    
  <!-- window contents here -->
</div>

CSS更改

使用translate总是比使用left在屏幕上移动内容更顺畅。使用translate很好，因为它会强制加速硬件。您的用户界面会更像本机应用，这总是您想要的。

.nav-trigger:checked ~ .window {
    ...
    transform: translateX(200px); /* swapped 'left' for 'transform' */
}
.nav-trigger + label, .window {
    transition: transform 0.2s; /* swapped 'left' for 'transform' */
}

<强>演示

http://codepen.io/antibland/pen/vGzBRm?editors=1100

我的父元素没有受到影响

2 个答案: