我正在尝试创建一个如下所示的响应式布局按钮:
但是问题是我无法创建三条水平线,只能创建其中一条。保持这种方式:
我的代码:
HTML
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
CSS
.navbar-toggler {
position: relative;
float: right;
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
z-index: 99999;
}
.navbar-toggler span {
height: 4px;
background: #545454;
transition: 0.2s all;
}
.navbar-toggler span:before, .navbar-toggler span:after {
content: "";
display: block;
}
答案 0 :(得分:1)
您可以将HTML Unicode ☰
用于汉堡图标
您可以在这里找到更多信息:https://www.w3schools.com/charsets/ref_utf_symbols.asp
.navbar-toggle
{
font-size:25px;
background:none;
border:none;
}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">☰
</button>
您还可以为图标设置动画,请参见:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js