链接在仅限CSS切换的汉堡包菜单中无效(Links not active in CSS

链接在仅限CSS切换的汉堡包菜单中无效(Links not active in CSS-only toggle-down hamburger menu)

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

菜单中的链接无效，无法点击。 我怀疑这是一种不透明的问题。 菜单可以在Codepen中看到。 这是链接：

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

任何帮助非常感谢。

谢谢，马丁

I've created a CSS-only toggle-down hamburger menu for cellphone browsers.

The links in the menu are not active, they're not clickable. I suspect it's some kind of opacity problem. The menu can be seen in Codepen. Here's the link:

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

Any help greatly appreciated.

Thanks, Martin

最满意答案

问题是负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> 
  
 
The problem is negative z-index value. This change will fix your issue.
 
.verticalNav {
    top: -135px; /* changed */
    z-index: 0; /* changed */
}
 
Update:
 
 
 
  
  
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>