首次加载html页面时默认打开导航栏

问题描述 投票：0回答：4

如何在首次加载页面时修改此代码以保持侧面导航栏的打开状态？我希望我的侧面导航默认打开。

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

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}
<div id="wrapper">
  <header>
    <div></div>
  </header>
  <nav>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Learn Here</span>

    <div id="mySidenav" class="sidenav">
      <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" height="20%" width="70%" style="padding-left: 36px; padding-right: 36px">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a class="nav_padding" href="#">About me</a>
      <a class="nav_padding" href="#">Resume</a>
      <a class="nav_padding" href="#">Projects</a>
      <a class="nav_padding" href="#">Contact Me</a>
      <script>
      </script>
    </div>
  </nav>
</div>
html css
4个回答
0
投票

在$（document）.ready（function（）{}）上添加脚本; ready函数在页面加载时执行java脚本，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
});
</script>
0
投票

你忘了添加CSS。

function openNav() {
  document.getElementById('mySidenav').style.width = '250px';
  document.body.style.backgroundColor = 'rgba(0,0,0,0.4)';
}

function closeNav() {
  document.getElementById('mySidenav').style.width = '0px';
  document.body.style.backgroundColor = 'white';
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  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.3s;
}

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

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
<div id="wrapper">
  <nav>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Learn Here</span>

    <div id="mySidenav" class="sidenav">
      <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" height="20%" width="70%" style="padding-left: 36px; padding-right: 36px">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a class="nav_padding" href="#">About me</a>
      <a class="nav_padding" href="#">Resume</a>
      <a class="nav_padding" href="#">Projects</a>
      <a class="nav_padding" href="#">Contact Me</a>
    </div>
  </nav>
</div>
0
投票

您可以添加通过JS添加的宽度，以便以内联方式添加。单击菜单关闭按钮时会被覆盖。

<div id="mySidenav" class="sidenav" style="width: 250px;">
0
投票

我重新安排了一些代码，并且能够使用onload事件属性使其工作：

    <div id="wrapper">
        <header>
             <script>
                 function openNav() {
                     document.getElementById("mySidenav").style.width = "250px";
                     document.getElementById("main").style.marginLeft = "250px";
                     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
                 }

                 function closeNav() {
                     document.getElementById("mySidenav").style.width = "0";
                     document.getElementById("main").style.marginLeft= "0";
                     document.body.style.backgroundColor = "white";
                 }
                 </script>
         </header>

         <body onload="openNav()">
             <nav>
                 <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Learn Here</span>
                 <div id="mySidenav" class="sidenav">
                     <img src="images/tab.png" height="20%" width="70%" style="padding-left: 36px; padding-right: 36px">
                     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                     <a class="nav_padding" href="#">About me</a>
                     <a class="nav_padding" href="#">Resume</a>
                     <a class="nav_padding" href="#">Projects</a>
                     <a class="nav_padding" href="#">Contact Me</a>
                 </div>
             </nav>
         </body>
     </div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.