Question

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);
}

Full screen overlay menu (pure css)

您好，我正在使用此代码制作一个只有css的叠加菜单。它的工作正常但我希望它在我点击菜单链接时关闭，而不仅仅是关闭图标。

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

Answer 1

如果您不想将jQuery用于页面加载时间/性能问题，则可以将每个菜单项转换为复选框。由于您的网站是单个网页，因此使用导航复选框也可以简化您的代码;一石二鸟。：d

全屏叠加菜单（纯CSS） - 单击菜单链接关闭它

1 个答案: