W3 - 사이드 바 햄버거 전환

-1

내가로부터 W3-사이드를 구현하고있다 : https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over W3 - 사이드 바 햄버거 전환

코드는 다시 닫 사이드 메뉴와 "닫기 X"메뉴 항목을 엽니 다 "hanburger"를 사용합니다.

동일한 "hanburger"아이콘을 사용하여 열기 및 닫기 동작을 모두 전환하고 싶습니다. 그래서 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

쉽습니다.

<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 - 사이드 바 햄버거 전환

답변

관련 문제