HTML側邊欄默認打開

-1

怎麼可以讓我的HTML網頁邊欄默認打開？然後，您應該能夠關閉並重新打開邊欄，但應該默認打開。目前我總是要點擊它打開。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>

來源

2016-11-29 user2786413

在電話結束時openNav()功能。

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

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

並確保使用<br />。沒有<br></br>。

小提琴：http://output.jsbin.com/wuliyuzuho

來源

2016-11-29 16:00:50

THX爲快回答！ – user2786413

@ user2786413點擊我答案中的鏈接，看看它是否適合你。 '：）' –

理想情況下，你不需要額外的呼叫'openNav'。你不應該只是設置的CSS，以便它默認打開？看到我上面的答案。 – pulekies

在CSS您正在設置width和margin-left是0開始。最初在css中將它們設置爲250px，它將默認打開。

<!DOCTYPE html> 
 
<html> 
 
<style> 
 
body \t { 
 
    \t font-family: "Calibri", sans-serif; font-color: #032e72; 
 
\t } 
 

 
.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; 
 
\t } 
 

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

 
.sidenav a:hover, .offcanvas a:focus { 
 
    color: #EBF5FB; 
 
\t } 
 

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

 
#main \t { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
    margin-left: 250px; 
 
\t } 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
\t } 
 
</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"> \t &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"; 
 
\t \t } 
 

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

 

 
</script> 
 
     
 
</body> 
 
</html>

來源

2016-11-29 16:06:11 pulekies

HTML側邊欄默認打開

回答

相關問題