如何在不使用任何框架的情況下為導航菜單創建響應式的“漢堡圖標”？

Question

我有一個自適應網站，正在使用☰ 來顯示漢堡圖標，但它與某些瀏覽器（例如電話瀏覽器和uc瀏覽器）不兼容，因此我想使用HTML和CSS來制作響應式漢堡圖標。

正如我說的那樣，我希望它具有響應性，所以我不想使用靜態的寬度和高度，而是希望根據屏幕尺寸進行更改，而我使用的是媒體查詢。

有一個使用以下html的想法：

<div class='navigation-icon'>
   <span></span>
   <span></span>
   <span></span>
</div>  

然后，每個<span>用於制作漢堡圖標層之一。

Answer 1

好吧...如果您要使用CDN，建議您使用http://fontawesome.io/或https://cdnjs.com/libraries/font-awesome 。

這是一個帶有很多精美圖標的庫，並且可以在所有瀏覽器上使用。

Answer 2

請看一看。

 $(document).ready(function(){ $('#nav-icon1').click(function(){ $(this).toggleClass('open'); }); }); 

 * { margin: 0; padding: 0; } /* Icon 1 */ #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 { width: 60px; height: 45px; position: relative; margin: 50px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon1 span, #nav-icon3 span, #nav-icon4 span { display: block; position: absolute; height: 9px; width: 100%; background: #333; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon1 span:nth-child(1) { top: 0px; } #nav-icon1 span:nth-child(2) { top: 18px; } #nav-icon1 span:nth-child(3) { top: 36px; } #nav-icon1.open span:nth-child(1) { top: 18px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } #nav-icon1.open span:nth-child(2) { opacity: 0; left: -60px; } #nav-icon1.open span:nth-child(3) { top: 18px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="nav-icon1"> <span></span> <span></span> <span></span> </div> 

Answer 3

 .navigation-icon span { display: block; width: 25px; height: 5px; margin: 5px; background-color: #000; } 

 <div class='navigation-icon'> <span></span> <span></span> <span></span> </div> 

Answer 4

您可以將圖標托管在響應式正方形內，如下所示：

HTML：

<div class="square">
    <div class='navigation-icon'>
       <span></span>
       <span></span>
       <span></span>
    </div> 
</div> 

CSS：

.square
{
  position: relative;
  margin: auto;
  width: 100%; <== This will determine the size of your square and therefore of the elements in it, as long as their size is specified in % as well.
}

.square:before
{
  content: "";
  display: block;
  padding-top: 100%; <== Leave this as is.
}

上面的css代碼將形成一個完美的正方形，該正方形將適應其嵌套的大小。正方形內部的任何內容都需要設置為position：絕對。 否則正方形將變成一個矩形。

Answer 5

嘗試這個。

<div class=menu></div>
<div class=menu></div>
<div class=menu></div>

.menu {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}