How to create vertical hamburger menu in wordpress?(Collabse Menu)

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>

Leave a Reply

Your email address will not be published. Required fields are marked *

RELATED POSTS