W3-サイドバーハンバーガートグル

-1

IからW3-サイドバーを実装しています： https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over W3-サイドバーハンバーガートグル

コードは再びそれを閉じるためにサイドメニューや「閉じるX」のメニュー項目を開くには、「hanburger」を使用しています。

私は、同じ「ハンバーガー」アイコンを使用して、開かれた動作と閉じた動作の両方をトグルしたいと考えています。

.w3-sidebar { 
    margin-top: 42px; 
}

コードは次のとおりです：

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<body> 

<!-- Sidebar --> 
<div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar"> 
    <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button> 
    <a href="#" class="w3-bar-item w3-button">Link 1</a> 
    <a href="#" class="w3-bar-item w3-button">Link 2</a> 
    <a href="#" class="w3-bar-item w3-button">Link 3</a> 
</div> 

<!-- Page Content --> 
<div class="w3-teal"> 
    <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button> 
    <div class="w3-container"> 
    <h1>My Page</h1> 
    </div> 
</div> 

<img src="img_car.jpg" alt="Car" style="width:100%"> 

<div class="w3-container"> 
<p>This sidebar is hidden by default, (style="display:none")</p> 
<p>You must click on the "hamburger" icon (top left) to open it.</p> 
<p>The sidebar will hide a part of the page content.</p> 
</div> 

<script> 
function w3_open() { 
    document.getElementById("mySidebar").style.display = "block"; 
} 
function w3_close() { 
    document.getElementById("mySidebar").style.display = "none"; 
} 
</script> 

</body> 
</html>

出典

2017-10-25 Dercni

-1

簡単そうhanburgerは、私が追加した常に表示されます。変更：

<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>

<button class="w3-button w3-teal w3-xlarge" onclick="w3_toggle()">☰</button>

へと追加します。

function w3_toggle() { 
     if (document.getElementById("topMenu").style.display == "none") { 
      document.getElementById("topMenu").style.display = "block"; 
     } else { 
      document.getElementById("topMenu").style.display = "none"; 
     } 
    }

を

出典

2017-10-25 22:08:46 Dercni

W3-サイドバーハンバーガートグル

答えて

関連する問題