Scroll to top

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 *