如何在不使用任何框架的情况下为导航菜单创建响应式的“汉堡图标”？

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;
}