Question

如何才能使我的HTML页面侧边栏默认打开？然后，您应该能够关闭并重新打开侧边栏，但它应该是默认打开的。目前我总是要点击它打开。

以下是代码：

<!DOCTYPE html>
<html>
<style>
  body {
    font-family: "Calibri", sans-serif;
    font-color: #032e72;
  }
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #00A2E8;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 60px;
  }
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #002838;
    display: block;
    transition: 0.2s
  }
  .sidenav a:hover,
  .offcanvas a:focus {
    color: #EBF5FB;
  }
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  #main {
    transition: margin-left .5s;
    padding: 16px;
  }
  @media screen and (max-height: 450px) {
    .sidenav {
      padding-top: 15px;
    }
    .sidenav a {
      font-size: 18px;
    }
  }
</style>

<body bgcolor="#e0f6ff">

  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="index.html">Etusivu</a>
    <a href="tuotteet.html">Tuotteet</a>
    <a href="tekijat.html">Ty&ouml;ntekij&auml;t</a>

    <br></br>
    <br></br>
    <br></br>
    <p align="center">&copy; Huomisen Vanhus Oy 2016</p>
  </div>

  <div id="main">
    <img src="LOGO_2.png" style="width:800px;height:180px;">
    <br></br>

    <span style="font-size:25px;cursor:pointer" onclick="openNav()">&#9776; Valikko</span>

    <h2>Huomisen Vanhus Oy</h2>

    <font size="5" ; font color=#002838>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> </br>

Aliquam et varius purus. Etiam scelerisque leo ac felis auctor, ac vestibulum eros imperdiet.
 </font>
  </div>


  <script>
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft = "0";
    }

    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
    }
  </script>

</body>

</html>

Answer 1

最后调用openNav()函数。

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

// Call this at the end.
openNav();

并确保使用<br />。没有<br></br>。

小提琴：https://github.com/caffeinalab/ti.goosh

Answer 2

在css中，您最初将width和margin-left设置为0。最初在css中将它们设置为250px，它将默认打开。

＆＃13;

<!DOCTYPE html>
<html>
<style>
body	{
  	font-family: "Calibri", sans-serif; font-color: #032e72;
	}

.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color:  #00A2E8;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 60px;
	}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #002838;
    display: block;
    transition: 0.2s
	}

.sidenav a:hover, .offcanvas a:focus {
    color: #EBF5FB;
	}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
	}

#main 	{
    transition: margin-left .5s;
    padding: 16px;
    margin-left: 250px;
	}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
	}
</style>

<body bgcolor="#e0f6ff">

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="index.html">Etusivu</a>
  <a href="tuotteet.html">Tuotteet</a>
  <a href="tekijat.html">Ty&ouml;ntekij&auml;t</a>

<br> </br>
<br> </br>
<br> </br>
<p align="center">	&copy; Huomisen Vanhus Oy 2016</p>
</div>

<div id="main">
<img src="LOGO_2.png" style="width:800px;height:180px;">
<br> </br>

 <span style="font-size:25px;cursor:pointer" onclick="openNav()">&#9776; Valikko</span>

 <h2>Huomisen Vanhus Oy</h2>

 <font size="5"; font color=#002838 >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> </br>

Aliquam et varius purus. Etiam scelerisque leo ac felis auctor, ac vestibulum eros imperdiet.
 </font>
</div>


<script>
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
		}

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
		}


</script>
     
</body>
</html>

＆＃13;

HTML侧边栏默认打开

2 个答案: