Sorry for the inconvenience. The truth is that they would send me to Google when reading my question, but I have already searched and searched and I can't find a code to implement it on my site since doing such an advanced thing is out of my reach.
What I am looking for is a sidenav to put on the right side of my website, which has to be hidden/shown by means of a button.
To be honest I already have one. I got this sidenav from the w3school website, but it gives me an error like this:
"Cannot read property 'style' of null."
The sidenav that I am looking for is the type that does not drag the content of the page, but rather overlaps it. I mean "overlay" type
Here I leave the link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Could someone give me a link to one, but not using Angular?
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight= "0";
}
#wrapper-tabs-o{
width: 220px;
}
#wrapper-tabs-o li{
color: #B0B0B0 ;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
right: 0;
background-color: #292F33;
overflow-x: hidden;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: inline;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-right: 50px;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/*@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}*/
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a>
<div id="wrapper-tabs-o">
<ul class="tabs2">
<li class="tab-link current" data-tab="tab-1"><i class="fa fa-list"
aria-hidden="true"></i></li>
<li class="tab-link" data-tab="tab-2"><i class="fi-comment"></i></li>
<div class="div_search"></div>
</ul>
</div>
</div>
By the way, I have this code in a separate file called sidenav.php, which is embedded in the main page through an include("")
You don't need great knowledge to do what you want. I highly recommend learning the basics of HTML, CSS, and JS and working your way up to being able to do things yourself.
To make an overlay type side menu you only need to take into account the following:
left
ortransform
.Example
In the code above there are some interesting aspects like the animation of the menu icon. This is achieved by simply rotating the extreme lines and fading the middle one.