HTML Sidenav on the wrong side

November 21, 2022

I work on a primitive website,and i got a sidenav code,built-in in the HTML.
My problem is,i didn’t know,how do i put the sidenav to the right side.
(I would like the animation to start from the right and "open" from the right side)
(I know,it was a answer in Stackoverflow,but i cant do it to work 🙁 )
Thanks the help!

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-16">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Próbálkozás</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          font-family: Arial;
          padding: 20px;
          background: #000000;
        }
        
        .header {
          padding: 10px;
          font-size: 40px;
          text-align: center;
          background: rgb(85, 85, 85);
        }
        
        .leftcolumn {   
          float: left;
          width: 75%;
        }



        .leftcolumn {   
          float: left;
          width: 61%;
        }
        
        .rightcolumn {
          float: left;
          width: 39%;
          padding-left: 20px;
        }
        
        .fakeimg {
          background-color: #aaa;
          width: 100%;
          padding: 20px;
        }
        
        .card {
           background-color: white;
           padding: 20px;
           margin-top: 20px;
        }
        
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
      
        .footer {
          padding: 20px;
          text-align: center;
          background: #ddd;
          margin-top: 20px;
        }
        
        @media screen and (max-width: 800px) {
          .leftcolumn, .rightcolumn {   
            width: 100%;
            padding: 0;
          }
        }
        </style>

<style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .topnav {
      overflow: hidden;
      background-color: rgb(0, 0, 0);
    }
    
    .topnav a {
      float: left;
      color: #ff0000;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a:hover {
      background-color: #707070;
      color: black;
    }
    
    .topnav a.active {
      background-color: #707070;
      color: white;
    }

      body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(70, 70, 70);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

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

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left 50s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

    </style>
</head>
<body>
    <div class="topnav" >
        <a href="Main.html" > Kezdőlap   </a>
        <a href="Electro.html" > Electrotechnika </a>
        <a href="Infó.html" > Informatika</a>
        <a href="Gépészet.html" > Gépészet   </a>
        <a href="Közg.html" > Közgazdálkodás    </a>
        <a class="active" href="próbálkozás.html" > Egyéb </a>
        <span class="active" style="font-size:30px;cursor:pointer;color:rgb(255, 0, 0); "  onclick="openNav()">&#9776;</span>
      </div>

      
                     
      <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">Kezdőlap</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
        <a href="#">asdasd</a>
      </div>
      
      <div id="main">
        <h2  style="color:white;"> -</h2>
        <p style="color:white;"> - </p>
      </div>
      
      <script>
      function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        document.body.style.backgroundColor = "rgb(0, 0, 0)";
      }
      
      function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft= "0";
        document.body.style.backgroundColor = "black";
      }
      </script>












</body>
</html>

>Solution :

Change left: 0 to right: 0 in the second style tag in the sidenav class selector.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgb(0, 0, 0)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "black";
}

* { box-sizing: border-box }

body {
  padding: 20px;
  background: #000000;
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  transition: background-color .5s;
}

.header {
  padding: 10px;
  font-size: 40px;
  text-align: center;
  background: rgb(85, 85, 85);
}

.leftcolumn {
  float: left;
  width: 75%;
}

.rightcolumn {
  float: left;
  width: 39%;
  padding-left: 20px;
}

.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

.topnav {
  overflow: hidden;
  background-color: rgb(0, 0, 0);
}

.topnav a {
  float: left;
  color: #ff0000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #707070;
  color: black;
}

.topnav a.active {
  background-color: #707070;
  color: white;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: rgb(70, 70, 70);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

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

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left 50s;
  padding: 16px;
}

@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

@media screen and (max-height: 450px) {
  .sidenav { padding-top: 15px }
  .sidenav a { font-size: 18px }
}

<!DOCTYPE html>
<html lang="hu">

<head>
  <meta charset="UTF-16">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Próbálkozás</title>
</head>

<body>
  <div class="topnav">
    <a href="Main.html"> Kezdőlap </a>
    <a href="Electro.html"> Electrotechnika </a>
    <a href="Infó.html"> Informatika </a>
    <a href="Gépészet.html"> Gépészet </a>
    <a href="Közg.html"> Közgazdálkodás </a>
    <a class="active" href="próbálkozás.html"> Egyéb </a>
    <span class="active" style="font-size:30px;cursor:pointer;color:rgb(255, 0, 0); " onclick="openNav()">&#9776;</span>
  </div>

  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">Kezdőlap</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    <a href="#">asdasd</a>
  </div>

  <div id="main">
    <h2 style="color:white;"> -</h2>
    <p style="color:white;"> - </p>
  </div>
</body>

</html>