HTML reset copy

<div id="jsb" class="dd"> <a href="javascript:void(0)" class="closefdd" onclick="closejeh()">×</a> <div class="dd-libo"> <a href="#">Home</a> <a href="#">Forum</a> <a href="#">Login</a> <a href="#">Comment</a> </div> </div> <div id="jsb2" class="dd2"> <a href="javascript:void(0)" class="closefdd" onclick="closejeh2()">×</a> <div class="dd-libo"> <a href="#">Home</a> <a href="#">Forum</a> <a href="#">Login</a> <a href="#">Comment</a> </div> </div> <div id="jsb3" class="bbdd"> <a href="javascript:void(0)" class="bbclosef" onclick="closejeh3()">×</a> <div class="bbdd-libo"> <a href="#">Home</a> <a href="#">Forum</a> <a href="#">Login</a> <a href="#">Comment</a> </div> </div> <button onclick="openjeh()">Slide Right</button> <button onclick="openjeh2()">Slide Down</button> <button onclick="openjeh3()">Show (basic)</button>

CSS reset copy

.dd { height: 100%; width: 0; position: fixed; z-index: 2; top: 0; left:0; background-color: rgba(0,0,0, 0.9); overflow-y: auto; overflow-x: hidden; text-align: center; transition: .5s; } .dd a, .dd2 a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: .3s; } .dd a:hover, .dd a:focus, .dd2 a:hover{ color: #f1f1f1; } .dd-libo { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .closefdd { position: absolute; top: 20px; right: 45px; font-size: 60px !important; } .dd2 { height: 0; width: 100%; position: fixed; z-index: 2; top: 0; left:0; background-color: rgba(0,0,0, 0.9); overflow-x: auto; overflow: hidden; text-align: center; transition: .5s; } @media screen and (max-height: 450px) { .dd a {font-size: 20px} .closefdd { font-size: 40px !important; top: 15px; right: 35px; } } .bbdd { height: 100%; width: 100%; display: none; position: fixed; z-index: 99999999999999999; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); } .bbdd-libo { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .bbdd a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .bbdd a:hover, .bbdd a:focus { color: #f1f1f1; } .bbdd .bbclosef { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .bbdd a {font-size: 20px} .bbdd .bbclosef { font-size: 40px; top: 15px; right: 35px; } }

Js JAVASCRIPT reset copy

function openjeh() { document.getElementById("jsb").style.width = "100%"; } function closejeh() { document.getElementById("jsb").style.width = "0%"; } function openjeh2() { document.getElementById("jsb2").style.height = "100%"; } function closejeh2() { document.getElementById("jsb2").style.height = "0%"; } function openjeh3() { document.getElementById("jsb3").style.display = "block"; } function closejeh3() { document.getElementById("jsb3").style.display = "none"; }