全屏覆盖菜单(纯CSS)-通过单击菜单链接将其关闭 [英] Full screen overlay menu (pure css) - Close it by clicking the menu link

问题描述

HTML

<input type="checkbox" id="op">
</input><div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS

@import "http://webfonts.ru/import/notcourier.css";
body{   background:url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg')
}
.lower{
width:340px;
margin:10% auto;
padding:50px;
background:white;
opacity:0.8;
color:black;
box-shadow:inset 0 0 0 1px black;
border:30px solid white;
}
.lower:hover{
background:black;
color:white;
box-shadow:inset 0 0 0 1px white;
border:30px solid black;
}
input{
display:none;
}
.lower label{
font-family: 'NotCourierSans';
text-transform:uppercase;
font-size:40px;
text-align:center;
}
.lower label:hover{
cursor:pointer;
}
.overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.9);
}
.overlay label{
width: 58px;
height:58px;
position: absolute;
right: 20px;
top: 20px;
background: url('http://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor:pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration:none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform:uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc{
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc{
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}

全屏覆盖菜单(纯CSS)

您好，我正在使用此代码制作仅包含CSS的覆盖菜单.它的工作正常，但我希望在我单击菜单链接时关闭它，而不仅仅是关闭图标.

Hello, I'm using this code to make an overlay menu with just css. Its works fine but I want it to close when I click a menu link, not just the close icon.

这将是一个一页设计的网站，因此理想情况下，菜单将向下滑动并滑动并显示新内容.

This will be an one page design website, so the menu ideally will slide down and away and the new content displayed.

推荐答案

如果您不想使用jQuery来解决页面加载时间/性能问题，则可以将每个菜单项都变成一个复选框.由于您的网站是一个页面，因此使用复选框进行导航也可以简化您的代码.用一块石头杀死两只鸟.:D

If you didn't want to use jQuery for the page load time/performance issue, you could have turned each menu item into a checkbox. Since your site is a single page, using checkbox for navigation would have simplified your code as well; killing two birds with one stone. :D

这篇关于全屏覆盖菜单(纯CSS)-通过单击菜单链接将其关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！