无法将按钮默认状态保持为单击状态

Question

在加载网站时，导航栏的预期设计为

我已经尝试过了，但无法将按钮的状态设置为单击。

我以视频格式实现的输出：https://files.fm/u/zpnp3t2ee

Answer 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>