0
我有一个滑动菜单：滑动菜单可叠加文字时关闭
@font-face {
font-family: ErasBold;
src: url('fonts/erasbd.TTF'); /* Chrome, Opera, Firefox */
}
@font-face{
font-family: ErasDemi;
src: url('fonts/erasdemi.TTF');
}
@font-face{
font-family: ErasLight;
src: url('fonts/eraslight.TTF');
}
body {
background-color: #EDEDED;
width: 90%;
min-height: 100%;
/*border-color: #000000; !INCASE YOU WOULD LIKE TO SEE WHERE THE BODY IS LOCATED ON THE SCREEN. USE FOR DEBUGGING VARIOUS DEVICES!
border-style: outset;*/
margin: 0 auto;
transition: 1s;
}
#header {
background-color: #000000;
position: fixed;
height: 95px;
width: 100%;
top: 0
left: 0;
right: 0;
}
#mainpage {
background-color: #EDEDED;
height: 82%;
width: 100%;
margin: 0 auto -4em;
position: relative;
padding: none;
overflow: auto;
}
#footer{
height: 80px;
width: 100%;
background-color: #000000;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#logo{
height: 100%;
width: auto;
}
.sideNav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sideNav a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 27px;
color: #818181;
display: block;
transition: 0.3s;
font-family: ErasLight;
}
.sideNav a:hover, .offcanvas a:focus{
color: #f1f1f1;
} \t
.sideNav .closeButton{
position: absolute;
top: 0;
right: 25px;
font-size: 40px;
margin-left: 50px;
}
@media screen and (max-height: 450px){
.sideNav {padding-top: 15px;}
.sideNav a {font-size: 18px;}
}
#menuStuff{
color: white;
float: right;
font-size: 30px;
font-family: ErasLight;
text-decoration: none;
margin-top: 20px;
margin-right: 20px;
}
#menuStuff .hover {
color: #FFFFFF;
text-decoration: none;
}<body> \t \t
<div id="header">
<a href="index.html"> <img src="images/logo.png" id="logo"> </a>
<div id="mySideNav" class="sideNav">
<a href="javascript:void(0)" class="closeButton" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="">About Me</a>
<a href="">My Work</a>
</div>
<a href="#"><span onclick="openNav()" id="menuStuff">Menu ☰</span></a>
<script>
function openNav() {
document.getElementById("mySideNav").style.width = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySideNav").style.width = "0px";
document.body.style.backgroundColor = "white";
}
</script>
</div>
<div id="mainpage">
</div>
<div id="footer">
</div>
</body>http://codepen.io/dangranger/pen/WGWqvm
而当你点击“X”关闭它，文本上的每个顶部堆叠其他当它向内移动时。我怎样才能做到这一点，以便它保持原状，然后滑出去？
（对不起，结构差，我努力解释）
你使用什么浏览器？它似乎在我的铬合作 – alexc