Question

我有一个菜单，其中包含不同的项目，这些项目是从控制器返回的，看起来像这样。

@foreach (var item in ViewBag.LoggedIn)
{
    if (item.Url == path)
     {
      <li><a class="active" href="@item.Url">@item.Text</a></li>

      }
      else
      {
       <li><a href="@item.Url">@item.Text</a></li>
      }
      <li class="slider"></li>
}

最后是“ li”，它是class =“ slider”的类别，它是“悬停/滑块”，我必须以某种方式定义该滑块的起始位置。

在css中这样定义悬停。

.menu li:nth-child(1):hover ~ .slider,
.menu li:nth-child(1):focus ~ .slider,
.menu li:nth-child(1):active ~ .slider {
   left: 0;
   background-color: #3498db;
 }

.menu li:nth-child(2):hover ~ .slider,
.menu li:nth-child(2):focus ~ .slider,
.menu li:nth-child(2):active ~ .slider {
     left: 20%;
     background-color: #9b59b6;
 }

，依此类推。

按下按钮后，所选链接被定义为活动。问题是“悬停/滑块”从左侧开始。如下图所示。在该示例中，单击了关于，但是“悬停/滑块”从Home开始，这有点奇怪。

我想知道如何使滑块/悬停（在图片中位于首页）成为链接处于活动状态的位置（关于）

下面提供了生成的HTML。

<ul class="menu">
    <li>
        <a href="/Home/Index">Home</a>
    </li>
    <li>
        <a href="/Home/Contact">Contact</a>
    </li>
    <li>
        <a class="active" href="/Home/About">About</a>
    </li>
    <li>
        <a href="/Account/Register">Register</a>
    </li>
    <li>
        <a href="/Account/Login">Log in</a>
    </li>
    <li class="slider" id="menu_slider"></li>
</ul>

在答案中实现滑块时，出现以下错误（红线不应该覆盖整个菜单，而只是所选链接）

Answer 1

这是我从您的问题中得到的理解：您想将“滑块”移动到当前处于活动状态或悬停的链接下。如果这是您想要的，那么我为您提供了解决方案。

由于您没有在菜单的其余部分中提供CSS属性，因此我使用自己的CSS属性来实现此目的。

我不是使用“滑块”，而是使用padding-bottom属性来移动滑块。当您在浏览器中运行它时，它会像移动“滑块”一样模拟

.menu li a.active,
.menu li a:hover {
    background-color: #E74C3C;
    padding-bottom: 20px;
    position: relative;
    z-index: 1;

}

这是下面代码片段中的完整解决方案。让我知道这是否不是您想要的，我将更新我的答案。

.menu {
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  display: flex;
}

.menu li:not(.slider) {
  box-sizing: border-box;
  background: #2C3E50;
  width: 100%;
}

.menu li a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 1rem;
}

.menu li a.active,
.menu li a:hover {
  background-color: #E74C3C;
  padding-bottom: 20px;
  position: relative;
  z-index: 1;
}

.menu .slider {
  height: 5px;
  width: calc(100% - 1rem);
  position: fixed;
  margin-top: 50px;
  background: #D6F1FF;
}

<ul class="menu">
  <li>
    <a href="/Home/Index">Home</a>
  </li>
  <li>
    <a href="/Home/Contact">Contact</a>
  </li>
  <li>
    <a class="active" href="/Home/About">About</a>
  </li>
  <li>
    <a href="/Account/Register">Register</a>
  </li>
  <li>
    <a href="/Account/Login">Log in</a>
  </li>
  <li class="slider" id="menu_slider"></li>
</ul>

悬停菜单项

1 个答案: