如何在我的網站的移動視圖中添加漢堡包

Question

我必須為網站代碼的移動視圖添加一個漢堡包。

我在w3學校的幫助下嘗試了一下，但效果不佳。

我將分享我的HTML和CSS代碼。 我添加了一個漢堡圖標，只是使其處於活動狀態。

我應該在單獨的JavaScript文件中編寫代碼還是在HTML中添加任何代碼？

我嘗試從HTML CSS屬性添加漢堡包

移動視圖標題的HTML和CSS：

 .mobheader { width: 80%; height: auto; margin: 0px auto; display: flex; align-items: center; justify-content: space-between; } .hamburger { font-size: 33px; color: white; float: left; margin-top: 20px; margin-bottom: 20px; } 

 <div class="mobheader"> <div class="hamburger"> <i class="fas fa-bars"></i> </div> <div class="logo"> <h1> <a href="#"><img src="img/logomob.png" alt="logo"></a> </h1> </div> <div class="dots"> <i class="fas fa-search"></i> </div> </div> 

我希望這個漢堡包以這樣的方式工作：單擊時顯示3個菜單

Answer 1

我無法發表評論，因為您已經發布的代碼有效，所以我不理解您的問題，我只是更改了代碼片段中的顏色和大小。 看看您的問題是否是其他問題，只是弄清楚您當前的問題是什么。

編輯

我找到一個Codepen，並將其添加到代碼段中以向您展示您想要的內容。

資料來源： https : //codepen.io/mranenko/pen/wevamj

 (function() { var hamburger = { navToggle: document.querySelector('.nav-toggle'), nav: document.querySelector('nav'), doToggle: function(e) { e.preventDefault(); this.navToggle.classList.toggle('expanded'); this.nav.classList.toggle('expanded'); } }; hamburger.navToggle.addEventListener('click', function(e) { hamburger.doToggle(e); }); }()); 

 /* imports */ @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); /* colors */ /* variables */ /* mixins */ /* resets and base styles */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } *:focus { outline: none; } html { background: #5634d1; color: white; font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; } body { background: none; color: inherit; font: inherit; } a { color: inherit; cursor: pointer; text-decoration: none; } a:hover { opacity: 0.8; } /* nav toggle */ .nav-toggle { -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; height: 2rem; left: 2rem; position: fixed; top: 2rem; width: 3.6rem; z-index: 2; } .nav-toggle:hover { opacity: 0.8; } .nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background: white; content: ''; height: 0.4rem; width: 100%; } .nav-toggle .nav-toggle-bar { margin-top: 0; } .nav-toggle .nav-toggle-bar::after { margin-top: 0.8rem; } .nav-toggle .nav-toggle-bar::before { margin-top: -0.8rem; } .nav-toggle.expanded .nav-toggle-bar { background: transparent; } .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before { background: white; margin-top: 0; } .nav-toggle.expanded .nav-toggle-bar::after { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav-toggle.expanded .nav-toggle-bar::before { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* nav */ .nav { -webkit-transition: left 0.5s ease; -moz-transition: left 0.5s ease; -ms-transition: left 0.5s ease; -o-transition: left 0.5s ease; transition: left 0.5s ease; background: #28dde0; color: white; cursor: pointer; font-size: 2rem; height: 100vh; left: -20rem; padding: 6rem 2rem 2rem 2rem; position: fixed; top: 0; width: 20rem; z-index: 1; } .nav.expanded { left: 0; } .nav ul { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); list-style: none; margin: 0; padding: 0; } 

 <div class="nav-toggle"> <div class="nav-toggle-bar"></div> </div> <nav class="nav"> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> 

Answer 2

假設漢堡包是一個圖像：

<img src="img/hamburger.png" alt="hamburger"/>

您不需要圖像的h1標簽，它們僅用於標題（即文本）

還記得“ /”關閉您的img標簽； 您的徽標沒有一個。