css实现一个menu导航菜单，点击后有选中效果

可以使用CSS的伪类选择器来实现菜单导航的选中效果。具体的步骤如下：

1. HTML结构

首先需要在HTML中创建菜单导航的结构，比如一个ul列表。

<ul class="menu">
  <li><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a></li>
  <li><a href="#">菜单4</a></li>
</ul>

2. CSS样式

然后我们可以设置菜单的基础样式，并使用:hover伪类选择器为菜单项添加鼠标悬停效果。同时，使用:active伪类选择器为菜单项添加鼠标点击效果。

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 20px;
}

.menu li a {
  display: inline-block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #eee;
}

.menu li a:active {
  background-color: #ccc;
}

3. 选中效果

最后，我们可以使用.active伪类选择器为当前选中的菜单项添加选中效果。

.menu li a.active {
  background-color: #ccc;
}

在JavaScript中，我们可以通过为菜单项添加点击事件来动态地为选中的菜单项添加.active类。

var menuItems = document.querySelectorAll('.menu li a');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].onclick = function() {
    // 移除当前所有已选中的菜单项
    for (var j = 0; j < menuItems.length; j++) {
      menuItems[j].classList.remove('active');
    }
    // 为当前菜单项添加选中效果
    this.classList.add('active');
  }
}