css - 链接在仅 CSS 的向下切换汉堡菜单中不活动

Question

我为手机浏览器创建了一个仅使用 CSS 的向下切换汉堡包菜单。

菜单中的链接未激活，不可点击。我怀疑这是某种不透明度问题。菜单可以在Codepen中看到。这是链接:

<http://codepen.io/martincol/pen/ZePKab>

非常感谢任何帮助。

谢谢，马丁

Answer 1

问题是负 z-index 值。此更改将解决您的问题。

.verticalNav {
    top: -135px; /* changed */
    z-index: 0; /* changed */
}

更新:

body {
    margin: 0;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

.overlay {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 80px;
    background-color: #fff;
}

.overlay > label {
    cursor: pointer;
    display: block;
    position: relative;
    top: 30px;
    left: 185px;
    width: 30px;
    height: 16px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

.overlay > label::before {
    content: '';
    display: block;
    position: relative;
    top: 7px;
    border-top: 2px solid #000;
}

.verticalNav {
    color: #333;
    position: relative;
    top: -55px;
    height: 135px;
    padding: 20px;
    padding-left: 130px;
    font-size: 22px;
    box-sizing: border-box;
    background-color: #ddd;
    transition: top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

.verticalNav a {
    display: block;
    color: #111;
    text-decoration: none;
}

.verticalNav a:hover {
    width: 120px;
    background-color: #fff;
}

.puppies {
    padding-bottom: 10px;
    margin-left: 115px;
    background-color: #fff;
    transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

img {
    margin-top: 5px;
    margin-left: 115px;
}

#toggle {
    position: absolute;
    visibility: hidden;
}

#toggle:checked ~ .verticalNav {
    top: 80px;
}

#toggle:checked  ~ .puppies {
    margin-top: 135px;
}

<div class="overlay">
    <label for="toggle"></label>
</div>

<input id="toggle" type="checkbox" name="toggle">
<div class="verticalNav">
    <a href="www.nytimes.com">NEWS</a>
    <a href="/">ABOUT</a>
    <a href="/">BLOG</a>
    <a href="/">CONTACT</a>
</div>

<div class="puppies">Puppies love pure CSS code</div>
<div>
    <img src="http://lorempixel.com/output/animals-q-c-200-200-8.jpg" alt="" />
</div>