如何为导航菜单中的两个元素设置活动背景色

Question

我有一个包含 2 个块的垂直导航栏菜单。首先是带图标的导航，其次是菜单文本。它们有不同的背景颜色。我如何为两个活动的导航块制作一种背景颜色？ design of menu

<div class="menu__icons">
  <ul class="menu__list">
    <li>
      <a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
    </li>
    <li>
      <a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
    </li>
    <li>
      <a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
    </li>
    <li>
      <a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
    </li>
  </ul>
</div>
<div class="menu__text">
  <ul class="menu__list">
    <li><a class="menu__item" href="#">First</a></li>
    <li><a class="menu__item" href="#">Second</a></li>
    <li><a class="menu__item" href="#">Third</a></li>
    <li><a class="menu__item" href="#">Fourth</a></li>
  </ul>
</div>
</div>

https://jsfiddle.net/levan563/1g5ucmwq/2/

Answer 1

据我所知，对两个块 li 使用 active class 并尝试使用字体、svg 图标或透明背景图像而不是块图像

.menu__list .active {
   background-color: red;
}

<div class="menu__icons">
    <ul class="menu__list">
        <li><a class="menu__item active" href="#">
          <img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
          </a></li>
    </ul>
</div>
<div class="menu__text">
    <ul class="menu__list">
        <li><a class="menu__item active" href="#">First</a></li>
    </ul>
</div>

Answer 2

可以使用 jQuery。

假设两个块中的列表项数量相同，

$(function(){
 $('.menu__list li').on('click', function() {
  var idx = $(this).index();
  $('.menu__list li').removeClass('active');
  $('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});

还在 css 中添加 .active class 并为 li 项也提供所需的样式

.active{
/**your style**/
}
.active > a{

}

.active img{

}

Answer 3

基本上如果你想切换 .active 并且你不想要列表的两个单独标记。

请注意，font-awesome 仅用于演示目的。

.menu__item {
  width: 250px;
  height: 50px;
  text-align: left;
}

.menu__item.active {
  background-color: #e9ebfd;
}

.menu__item.active .menu__icon {
  background-color: #e9ebfd;
  border-left: 4px solid #2c39ec;
}

.menu__item.active .menu__title {
  background-color: #e9ebfd;
}

.menu__item a:hover {
  text-decoration: none;
}

.menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #fafafa;
  color: #2c39ec;
}

.menu__title {
  display: inline-block;
  padding-left: 20px;
  color: #777777;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
  <ul class="menu__list list-unstyled">
    <li class="menu__item active">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-tachometer-alt"></i>
        </div>
        <div class="menu__title">Main Dashboard</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-user"></i>
        </div>
        <div class="menu__title">Profile</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-bell"></i>
        </div>
        <div class="menu__title">Finances</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-calendar"></i>
        </div>
        <div class="menu__title">Titles</div>
      </a>
    </li>
  </ul>
</nav>

相关Fiddlehttps://jsfiddle.net/mhrabiee/dojL9get/28/

如何为导航菜单中的两个元素设置活动背景色

How can i make active background color for two elements in nav menu

html

css

menu

html-lists

twitter-bootstrap