Disculpen la molestia.La verdad es que me mandarían a buscar a Google al leer mi pregunta,pero ya he buscado y buscado y no encuentro un código para implementarlo en mi sitio ya que hacer una cosa así de avanzada esta fuera de mi alcance.
Lo que busco es un sidenav para ponerlo al lado derecho de mi web,el cual ha de ocultarse/mostrarse mediante un botón.
Para ser sincero ya tengo uno.Este sidenav lo he conseguido en la web w3school,pero me da error así:
"Cannot read property 'style' of null".
El sidenav que busco, es del tipo que no arrastra el contenido de la pagina,sino que se sobrepone.Osea de tipo "overlay"
Aquí les dejo el link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
¿Alguien podría darme algún link de alguno,pero que no sea usando 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>
Por cierto este codigo lo tengo en un archivo aparte llamado sidenav.php,el cual esta incrustado en la pagina principal mediante un include("")