<![CDATA[
<p><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://www.geeksforgeeks.org/create-a-mobile-toggle-navigation-menu-using-html-css-and-javascript/" target="_blank" class="ke-link">https://www.geeksforgeeks.org/create-a-mobile-toggle-navigation-menu-using-html-css-and-javascript/</a></b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML, CSS 및 JavaScript를 사용하여 모바일 토글 탐색 메뉴 만들기 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Mobile Navigation Bar</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          content="width=device-width, initial-scale=1"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          /* Navigation bar styling */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu-list { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    max-width: 300px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 500px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: green; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Logo, navigation menu styling */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.geeks { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    overflow: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #111; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Styling navigation menu */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.geeks #menus { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Link specific styling */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.geeks a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 14px 16px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 16px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Navigation toggle menu styling */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.geeks a.icon { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    right: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Hover effect on navigation logo and menu */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.geeks a:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #ddd; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: black; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>           </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>           </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="menu-list"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!-- Logo and navigation menu --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="geeks"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#" class="">GeeksforGeeks</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div id="menus"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#">Language</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#">Practice</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#">Interview</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <a href="#">Puzzle</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <!-- Bar icon for navigation --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="xxjavascript:void(0);" class="icon" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               xxonclick="geeksforgeeks()"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               <i xxonclick="myFunction(this)" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        class="fa fa-plus-circle"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>               </i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    // Function to toggle the bar </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>function geeksforgeeks() { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    let x = document.getElementById("menus"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    if (x.style.display === "block") { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        x.style.display = "none"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } else { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        x.style.display = "block"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>// Function to toggle the plus menu into minus </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>function myFunction(x) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    x.classList.toggle("fa-minus-circle"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<!-- -->
]]>
