create vertical hamburger menu in wordpress?(Collabse Menu)
<html>
<head>
<style>
header#masthead {
display: none;
}
footer#colophon {
display: none;
}
.leftside {
background-color: red;
width: 20%;
height: 100vh;
position: absolute;
z-index: 1;
top: 0%;
bottom: 0%;
left: -20%;
}
.mainbox{
width:100%;
height:100vh;
background-color:blue;
display:flex;
align-item:center;
justify-content:center;
position:absolute;
}
.innerbox{
border:2px solid black;
width:95%;
height:95vh;
margin:auto;
position:relative;
}
input.bottonleft {
color: wheat;
background: #31a529;
position: absolute;
top: 0;
left: 0;
margin:10px;
}
input.bottonx {
color: wheat;
background: #8c6767;
position: absolute;
top: 0;
right: 0;
margin: 12px;
margin-top: 30px;
}
.blue{
left:0%;
transition:all 0.8s;
}
.green{
padding-left:20%;
transition:all 0.8s;
}
.pink{
left:-20%;
transition:all 0.8s;
}
.yellow{
padding-left: 0%;
transition:all 0.8s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bottonleft").click(function(){
$(".leftside").addClass("blue");
$(".mainbox").addClass("green");
$(".leftside").removeClass("pink");
$(".mainbox").removeClass("yellow")
});
$(".bottonx").click(function(){
$(".leftside").addClass("pink");
$(".mainbox").addClass("yellow");
$(".leftside").removeClass("green");
$(".mainbox").removeClass("blue");
});
});
</script>
</head>
<body>
<div class="leftside">
<input type="button" name="buttonx" class="bottonx" value="X"></div>
<div class="mainbox">
<div class="innerbox">
<input type="button" name="button" class="bottonleft" value=">">
</div>
</div>
</body>
</html>
No comments:
Post a Comment