打開和關閉sidenav菜單和導航欄問題

Question

我遇到了幾個問題在這裏。我正在嘗試設置一個鎖定的頂部欄，它可以工作。但是，即使我已經放置了一些項目，如橙色動畫按鈕，它會出現在文本鏈接之前的欄上。其次。我希望可以使用動畫按鈕作爲一種手段來關閉頁面右側的彈出式菜單。對不起，如果這是真的很簡單，我在這裏失蹤。我仍然在學習這些東西。

function myFunction(x) { 
 
    x.classList.toggle("change"); 
 
    } 
 
    
 
    function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    } 
 

 
    function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    }

body { 
 
    font-family: "Lato", sans-serif; 
 
    } 
 

 
    .sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
    } 
 

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

 
    .sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
    } 
 

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

 
    @media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
    } 
 
     
 
     
 
    .navbar { 
 
    overflow: hidden; 
 
    background-color: #577CC1; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    } 
 

 
    .navbar a { 
 
    float: right; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 10px 10px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    } 
 

 
    body { 
 
    margin:0; 
 
    background-color: #ec7c23; 
 
\t font-color: ; 
 
\t font-size: 10pt; 
 
\t font-family: arial; 
 
    height: 1000; 
 
\t 
 
    } 
 

 
    p, td, th { 
 
\t font-size: 10pt; 
 
\t font-family: arial; 
 
    } 
 

 
    form { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 

 
    .main { 
 
    padding: 10px; 
 
    margin-top: 30px; 
 
    } 
 

 

 

 
    /*animated button*/ 
 
    .container { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    } 
 

 
    .bar1, .bar2, .bar3 { 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: #ec7c23; 
 
    margin: 6px 0; 
 
    transition: 0.4s; 
 
    } 
 

 
    .change .bar1 { 
 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; 
 
    transform: rotate(-45deg) translate(-9px, 6px) ; 
 
    } 
 

 
    .change .bar2 {opacity: 0;} 
 

 
    .change .bar3 { 
 
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ; 
 
    transform: rotate(45deg) translate(-8px, -8px) ; 
 
    } 
 
    /*END animated button*/

<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
 
    </a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
</div> 
 

 
<div class="navbar"> 
 
    <font size=20 color=white>&nbsp; 
 
    <b>Website</b> 
 
    </font> 
 

 

 
    <a href="#link">Link</a> 
 
    <a href="#Link2">Another Link</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 

 
    &nbsp;&nbsp;&nbsp;&nbsp; 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()" > 
 
    <div class="container" onclick="myFunction(this)" > 
 
     <div class="bar1"></div> 
 
     <div class="bar2"></div> 
 
     <div class="bar3"></div> 
 
    </div> 
 
    </span> 
 
</div>

Answer 1

希望這有助於：

<div class="navbar" style="z-index: 1000"> 
    <font size=20 color=white>&nbsp; 
     <b>Website</b></font> 

    <span style="font-size:30px;cursor:pointer;float:right;"> 
     <div class="container" onclick="myFunction(this)"> 
      <div class="bar1"></div> 
      <div class="bar2"></div> 
      <div class="bar3"></div> 
     </div> 
    </span> 
    <a href="#link">Link</a> 
    <a href="#Link2">Another Link</a> 
    <a href="#contact">Contact</a> 
    <a href="#about">About</a> &nbsp;&nbsp;&nbsp;&nbsp; 
</div> 

<script> 
    function myFunction(x) { 
     x.classList.toggle("change"); 
     var mySidenavWidth = document.getElementById("mySidenav").style.width; 

     if (mySidenavWidth === "250px") 
      closeNav(); 
     else 
      openNav();    
    } 
    function openNav() { 
     document.getElementById("mySidenav").style.width = "250px"; 
    } 

    function closeNav() { 
     document.getElementById("mySidenav").style.width = "0px"; 
    } 
</script>