JS+CSS实现另类带提示效果的竖向导航菜单

下面我将详细讲解“JS+CSS实现另类带提示效果的竖向导航菜单”的完整攻略。

简介

竖向导航菜单一般以垂直方式呈现导航菜单，常用于侧边栏菜单或右侧固定导航栏。本攻略将结合JS和CSS，实现一个带提示效果的竖向导航菜单，以提高用户体验。

实现原理

本攻略实现的竖向导航菜单的提示效果是，菜单高亮时，显示一个竖条，正好在菜单项边缘。具体实现需要借助一些JS和CSS技巧，具体步骤如下：

1. 将竖条元素创建在HTML结构中，将其设置为隐藏状态。
2. 使用JS动态计算当前菜单项相对窗口顶部距离，并将竖条元素移动到该位置。
3. 通过CSS样式调整竖条元素的长度、颜色和边框等属性。

代码示例

下面我们将结合两个示例，对上述步骤进行具体演示。

示例1

HTML结构：

<div class="menu">
  <ul>
    <li><a href="#">菜单一</a></li>
    <li><a href="#">菜单二</a></li>
    <li><a href="#">菜单三</a></li>
    <li><a href="#">菜单四</a></li>
  </ul>
  <div class="menu-tip"></div>
</div>

CSS样式：

.menu {
  position: relative;
}
.menu-tip {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: red;
  border-radius: 2px;
  display: none;
}
.menu li.active .menu-tip {
  display: block;
}

JS代码：

var menu = document.querySelector('.menu');
var menuTip = document.querySelector('.menu-tip');

menu.addEventListener('mouseenter', function (e) {
  var activeItem = e.target.closest('li');
  if (!activeItem) return;
  menuTip.style.display = 'block';
  menuTip.style.top = activeItem.offsetTop + 'px';
});

menu.addEventListener('mouseleave', function () {
  menuTip.style.display = 'none';
});

示例2

HTML结构：

<div class="menu">
  <ul>
    <li><a href="#">菜单一</a></li>
    <li><a href="#">菜单二</a></li>
    <li><a href="#">菜单三</a></li>
    <li><a href="#">菜单四</a></li>
  </ul>
  <div class="menu-tip"></div>
</div>

CSS样式：

.menu {
  position: relative;
}
.menu-tip {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  background-color: red;
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .2s ease-out;
}
.menu li.active .menu-tip {
  transform: scaleY(1);
}

JS代码：

var menu = document.querySelector('.menu');
var menuTip = document.querySelector('.menu-tip');

menu.addEventListener('mouseenter', function (e) {
  var activeItem = e.target.closest('li');
  if (!activeItem) return;
  var itemRect = activeItem.getBoundingClientRect();
  menuTip.style.transform = 'scaleY(' + itemRect.height + 'px)';
  menuTip.style.top = itemRect.top + 'px';
});

menu.addEventListener('mouseleave', function () {
  menuTip.style.transform = 'scaleY(0)';
});

总结

通过本攻略的演示，我们可以学到一个基于JS和CSS的竖向导航菜单带提示效果的实现方法。需要注意的是，在实际项目中，可能需要根据不同情况进行一些微调或改进。