メニューの開閉とナビゲーションバーの問題

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>