答案 0 :(得分:1)
您可以尝试使用输入单选按钮。 选中的 [type="radio"] 将具有彩色底部边框。
注意:我使用 FontAwesome 作为菜单图标。
.menu {
display: block;
}
.menu .menu-item {
cursor: default;
display: inline;
}
.menu .menu-item [type="radio"] {
position: absolute;
left: -100vw;
}
.menu .menu-item [type="radio"]:checked ~ label {
border-bottom: 4px solid #080;
}
.menu .menu-item label {
border-bottom: 4px solid transparent;
cursor: pointer;
display: inline-block;
padding: 4px 8px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/>
<div class="menu">
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemDashboard" value="Dashboard" checked>
<label for="MenuItemDashboard"><span class="fa fa-tachometer-alt"></span> Dashboard</label>
</div>
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemClasses" value="Classes">
<label for="MenuItemClasses"><span class="fa fa-chalkboard"></span> Classes</label>
</div>
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemTimeTable" value="TimeTable">
<label for="MenuItemTimeTable"><span class="fa fa-calendar-alt"></span> Time Table</label>
</div>
</div>