Zvezdas1989 Zvezdas1989 -4 years ago 130
HTML Question

Sidenav overlay fixed in top right corner

Hi guys I'm trying to make navigation that is fixed in top right corner comes from right side of the screen (right to left animation). Now using example from w3school I was able to come up with the following code:
HTML:

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>


SCSS:

#mySidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 55px;
margin-left: 50px;
}


JS:

function openNav() {
document.getElementById('mySidenav').style.width = '300px';
}

function closeNav() {
document.getElementById('mySidenav').style.width = '0';
}


Now the code works fine that not my issue. I would like make my sidenav fixed in top right corner with animation from right to left, every try I made has been and utter failure. So my question is it possible to do this and how would you guys do it ????
Here is the link to the codepen I made so you can see the code in action https://codepen.io/Karadjordje/pen/MpKvXp

Answer Source

Change left: 0; to right: 0;.

Working example:

function openNav() {
  document.getElementById('mySidenav').style.width = '300px';
}

function closeNav() {
  document.getElementById('mySidenav').style.width = '0';
}
.hamburger {
  font-size: 30px;
  cursor: pointer;
  top: 20px;
  right: 20px;
  position: fixed;
}

#mySidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

#mySidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s
}

#mySidenav a:hover,
#mySidenav .offcanvas a:focus {
  color: #f1f1f1;
}

#mySidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 55px;
  margin-left: 50px;
}

body {
  height: 200em;
  position: relative;
}
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<span class="hamburger" onclick="openNav()">&#9776;</span>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download