How to implement a Sidenav on my website?

Question

How to implement a Sidenav on my website?

Navigation

#1 by (4 votes)

2

Sorry for the inconvenience. The truth is that they would send me to Google when they read my question, but I have already searched and searched and I can not find a code to implement it on my site since doing something like this is out of my reach.

What I'm looking for is a sidenav to put it on the right side of my web, which has to be hidden / displayed by a button.

To be honest I already have one. This sidenav I got it on the w3school website, but I get an error like this:

"Can not 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. It is of the "overlay" type

Here is the link. link

Could someone give me a link to some, 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 this code I have it in a separate file called sidenav.php, which is embedded in the main page by an include ("")

javascript jquery html5 css3

asked by luis 26.02.2017 в 16:47

source

1 answer

Error Undefined offset in PHP How to use a class as a type of a function external to the class?

score 4 · Accepted Answer

You do not need great knowledge to do what you want. I strongly recommend you to learn the basics of HTML, CSS and JS and progressively progress so that you can do things for yourself.

To make a side menu type overlay you just need to consider the following:

How to move the menu. For this you can use left or transform .
Type of animation and duration
Extras as shadows, animations of the burguer icon, etc.

Example

document.addEventListener('DOMContentLoaded', function () {
	let burguer = document.getElementById('burguer');
  let sidebar = document.getElementById('sidebar');

  burguer.addEventListener('click', function () {
    sidebar.classList.toggle('visible');
  });
});

@import url('https://fonts.googleapis.com/css?family=Barrio');


*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
}

.navigation {
  background-color: #f5f7fb;
  box-shadow: 0 4px 6px 0 rgba(0,0,0,.2);
  height: 100vh;
  left: -231px;
  width: 230px;
  padding: 12px 20px;
  position: fixed;
  transition: all .5s cubic-bezier(.39,.575,.565,1);
  top: 0;
}

.navigation.visible {
  left: 0;
}

.navigation.visible .burguer span:first-child {
  transform: rotate(45deg);
}

.navigation.visible .burguer span:nth-child(2) {
  opacity: 0;
  visibility: hidden;
}

.navigation.visible .burguer span:last-child {
  transform: rotate(-45deg) translate(10px, -10px);
}

.burguer {
  background-color: transparent;
  border: none;
  cursor: pointer;
  left: 10px;
  outline: none;
  position: fixed;
  top: 10px;
}

.burguer span {
  background-color: #555;
  display: block;
  height: 2px;
  margin: 5px 0;
  transition: all .35s cubic-bezier(.39,.575,.565,1);
  width: 25px;
}

.menus {
  list-style: none;
  margin-top: 50px;
}

.menu a {
  border-bottom: 1px dashed #aaa;
  color: #333;
  display: block;
  font-family: 'Barrio';
  padding: 15px 0;
  text-decoration: none;
}

<aside id="sidebar" class="navigation">
  <button id="burguer" class="burguer">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <ul class="menus">
    <li class="menu">
      <a href="#">Principal</a>
    </li>
    <li class="menu">
      <a href="#">Blog</a>
    </li>
    <li class="menu">
      <a href="#">Portafolio</a>
    </li>
  </ul>
</aside>

In the previous code there are some interesting aspects like the animation of the menu icon. This is achieved simply by rotating the extreme lines and fading the intermediate one.