仅使用CSS将Bootstrap 4汉堡包图标更改为三个点菜单图标的最佳方法 [英] Best way to change bootstrap 4 hamburger icon to three dots menu icon using only css
本文介绍了仅使用CSS将Bootstrap 4汉堡包图标更改为三个点菜单图标的最佳方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
标准bootstrap 4导航栏按钮带有一个汉堡包图标.
The standard bootstrap 4 navbar button features a hamburger icon.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
如何将其从原始的汉堡包图标更改为仅css的三个点或烤肉串点菜单图标?
How can this be changed from the original hamburger icon to a css only three dots or kebab dots menu icon?
从这里..
为此...(我很欣赏颜色是不同的)
To this... (I appreciate the colors are different)
推荐答案
body {
background:#262626;
}
input {
visibility:hidden;
}
.menu_container {
padding:10px;
border:1px solid #a0a0a0;
width:30px;
height:30px;
position:relative;
border-radius:4px;
}
.line1,
.line2,
.line3 {
width:calc(100% - 20px);
height:3px;
border-radius:2px;
background:#a0a0a0;
position:absolute;
top:50%;
transform:translateY(-50%)
}
.line2 {
transform:translateY(calc(-50% + 10px));
}
.line3 {
transform:translateY(calc(-50% - 10px));
}
.dot_menu {
background:#e0e0e0;
position:relative;
height:50px;
border:1px solid #e0e0e0;
width:20px;
margin:0;
display:none;
}
input:checked + .menu_container{
display:none;
}
input:checked + div + div {
display:block;
}
.dot1,
.dot2,
.dot3 {
height:9px;
width:9px;
background:#262626;
border-radius:2px;
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
.dot2 {
transform:translateY(calc(-50% + 13px)) translateX(-50%);
}
.dot3 {
transform:translateY(calc(-50% - 13px)) translateX(-50%);
}
<label>
<input type="checkbox">
<div class="menu_container">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="dot_menu">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
</label>
这篇关于仅使用CSS将Bootstrap 4汉堡包图标更改为三个点菜单图标的最佳方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文