如何将网页内置Sidenav改为从右侧滑出并显示？

以下是修改后的完整代码，实现侧边栏固定在页面右侧，点击后从右向左展开：

<!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;
  right: 0;
  background-color: rgb(70, 70, 70);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

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

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

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

#main {
  transition: margin-right 0.5s;
  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.marginRight = "250px";
        document.body.style.backgroundColor = "rgb(0, 0, 0)";
      }
      
      function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginRight= "0";
        document.body.style.backgroundColor = "black";
      }
      </script>
</body>
</html>

关键修改点说明： #

• 侧边栏定位：将.sidenav的left: 0改为right: 0，让侧边栏固定在页面右侧
• 关闭按钮位置：把.sidenav .closebtn的right: 25px改为left: 25px，同时将margin-left改为margin-right，适配右侧侧边栏的布局
• 主内容区过渡：将#main的transition: margin-left 50s修正为transition: margin-right 0.5s，同时在JS的openNav和closeNav函数中，把marginLeft替换为marginRight，确保主内容随侧边栏展开向左收缩
• 链接对齐优化：调整.sidenav a的padding为8px 32px 8px 8px，并添加text-align: right，让链接在右侧侧边栏中靠右对齐，视觉更协调
• 修正过渡时间：把原代码中#main的50s过渡时间改为0.5s，和侧边栏的过渡速度保持一致，动画更流畅

内容的提问来源于stack exchange，提问作者Wonyik