漢堡包菜單與徽標圖像相同的頂部導航欄

Question

因此經過多日的研究和調查，我似乎無法將我的頭圍繞在這個概念上。

我想要做到的是有在頁面的頂部有三個組件的導航欄：在頂部導航欄的左側

• 影像（LOGO1）。
• 導航欄中央的圖像（Logo2）。
• ..最後，在右邊的漢堡包菜單，用不透明度向下滑動整個頁面，並用 鏈接項瀏覽網站。

這裏是我試圖表現出所有這些

function openNav() { 
 
document.getElementById("myNav").style.height = "100%"; 
 
} 
 

 
function closeNav() { 
 
document.getElementById("myNav").style.height = "0%"; 
 
}

li{ 
 
       text-decoration: none; 
 
      } 
 
      .overlay { 
 
         height: 0%; 
 
         width: 100%; 
 
         position: fixed; 
 
         z-index: 1; 
 
         top: 0; 
 
         left: 0; 
 
         background-color: rgb(0,0,0); 
 
         background-color: rgba(0,0,0, 0.9); 
 
         overflow-y: hidden; 
 
         transition: 0.5s; 
 
        } 
 

 
        .overlay-content { 
 
        position: relative; 
 
        top: 25%; 
 
        width: 100%; 
 
        text-align: center; 
 
        margin-top: 0px; 
 
       } 
 

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

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

 
       .overlay .closebtn { 
 
        position: absolute; 
 
        top: 20px; 
 
        right: 45px; 
 
        font-size: 60px; 
 
       } 
 

 
       header{ 
 
       width:100%; 
 
       background:#1d1f20; 
 
       height:60px; 
 
       line-height:60px; 
 
       } 
 

 
       @media screen and (max-height: 450px) { 
 
        .overlay {overflow-y: auto;} 
 
        .overlay a {font-size: 20px} 
 
        .overlay .closebtn { 
 
        font-size: 80%; 
 
        top: 15px; 
 
        right: 35px; 
 
        } 
 
       }

<header> 
 
      <div> 
 
       <img src="" width="50px" height="30px"/> 
 
       <img style="margin-left: 620px;" src="" width="50px" height="30px" /> 
 
       <span style="font-size:30px;cursor:pointer; float: left;" onclick="openNav()">&#9776;</span> 
 
       <div id="myNav" class="overlay"> 
 
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
        <div class="overlay-content"> 
 
         <ul>  
 
          <li><a href="#">Home</a></li> 
 
          <li><a href="#">Page1</a></li> 
 
          <li><a href="#">Page2</a> 
 
          <ul> 
 
            <li><a href="#">Page3</a></li> 
 
            <li><a href="#">Page4</a></li> 
 
            <li><a href="#">Page5</a></li> 
 
           </ul> 
 
          </li> 
 
          <li><a href="#">Page6</a> 
 
          <ul> 
 
            <li><a href="#">Page7</a></li> 
 
           </ul> 
 
          </li> 
 
          <li><a href="#">Page8</a> 
 
          <ul> 
 
           <li><a href="#">Page9</a></li> 
 
           <li><a href="#">Page10</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="#">Page11</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </header>

任何幫助或指導做好將非常感激。我還在學習！ ：） 謝謝！

Answer 1

你的漢堡包圖標漂浮在左邊。只需將其更改爲浮動：正確;

function openNav() { 
 
document.getElementById("myNav").style.height = "100%"; 
 
} 
 

 
function closeNav() { 
 
document.getElementById("myNav").style.height = "0%"; 
 
}

 

 
span{ 
 
    float: right !important; 
 
    color: white; 
 
} 
 
li{ 
 
       text-decoration: none; 
 
      } 
 
      .overlay { 
 
         height: 0%; 
 
         width: 100%; 
 
         position: fixed; 
 
         z-index: 1; 
 
         top: 0; 
 
         left: 0; 
 
         background-color: rgb(0,0,0); 
 
         background-color: rgba(0,0,0, 0.9); 
 
         overflow-y: hidden; 
 
         transition: 0.5s; 
 
        } 
 

 
        .overlay-content { 
 
        position: relative; 
 
        top: 25%; 
 
        width: 100%; 
 
        text-align: center; 
 
        margin-top: 0px; 
 
       } 
 

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

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

 
       .overlay .closebtn { 
 
        position: absolute; 
 
        top: 20px; 
 
        right: 45px; 
 
        font-size: 60px; 
 
       } 
 

 
       header{ 
 
       width:100%; 
 
       background:#1d1f20; 
 
       height:60px; 
 
       line-height:60px; 
 
       } 
 

 
       @media screen and (max-height: 450px) { 
 
        .overlay {overflow-y: auto;} 
 
        .overlay a {font-size: 20px} 
 
        .overlay .closebtn { 
 
        font-size: 80%; 
 
        top: 15px; 
 
        right: 35px; 
 
        } 
 
       }

<header> 
 
      <div> 
 
       <img src="" width="50px" height="30px"/> 
 
       <img style="margin-left: 620px;" src="" width="50px" height="30px" /> 
 
       <span style="font-size:30px;cursor:pointer; float: left;" onclick="openNav()">&#9776;</span> 
 
       <div id="myNav" class="overlay"> 
 
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
        <div class="overlay-content"> 
 
         <ul>  
 
          <li><a href="#">Home</a></li> 
 
          <li><a href="#">Page1</a></li> 
 
          <li><a href="#">Page2</a> 
 
          <ul> 
 
            <li><a href="#">Page3</a></li> 
 
            <li><a href="#">Page4</a></li> 
 
            <li><a href="#">Page5</a></li> 
 
           </ul> 
 
          </li> 
 
          <li><a href="#">Page6</a> 
 
          <ul> 
 
            <li><a href="#">Page7</a></li> 
 
           </ul> 
 
          </li> 
 
          <li><a href="#">Page8</a> 
 
          <ul> 
 
           <li><a href="#">Page9</a></li> 
 
           <li><a href="#">Page10</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="#">Page11</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </header>