CSS实现菜单/选项卡(tab)切换时流线过渡效果

技术频道 - html技术

CSS实现菜单/选项卡(tab)切换时流线过渡效果

作者:admin 时间:2023-4-6 14:23:28 浏览:

本文介绍一个CSS实现的菜单(menu)或选项卡(tab)切换时流动过渡的效果，你可能在不少网站上看到过。

效果图

CSS实现的菜单/选项卡(tab)切换时流动过渡效果

demo download

实例介绍

CSS实现的菜单（menu）或选项卡（tab），当切换时，有一个流体过渡效果，这是本文要介绍的重点。

HTML代码

选项卡外标签是<nav></nav>，盒子容器是<ul></ul>，活动项li的class值为active。

<nav>
  <ul>
    <li class="active"><a href="">First</a></li>
    <li><a href="">Second</a></li>
    <li><a href="">Third</a></li>
  </ul>
</nav>

CSS代码

CSS代码较少，也较简短。nav主要是菜单/选项卡整体定位作用以及外观样式的设置。nav .line是流体线的样式设置。nav ul是盒子样式设置。nav ul li是各个菜单/项目的样式设置。

nav {
  position: relative;
  padding-bottom: 12px;
}
nav .line {
  height: 2px;
  position: absolute;
  bottom: 0;
  margin: 10px 0 0 0;
  background: #FF1847;
}
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
nav ul li {
  margin: 0 40px 0 0;
  opacity: 0.4;
  transition: all 0.4s ease;
}
nav ul li:hover {
  opacity: 0.7;
}
nav ul li.active {
  opacity: 1;
}
nav ul li:last-child {
  margin-right: 0;
}
nav ul li a {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-size: 14px;
}

JavaScript

本实例需要用到JavaScript编程，它实现了流体的动画效果。实现原理：

对于活动选项卡

查找nav盒子里的活动选项卡.active，然后在其位置下面添加一个线状（css类为.line）的div。

点击切换选项卡时

触发代码为

nav.find('ul li a').click(function (e) {
...
});

先找到非活动选项卡，同时也非点击的选项卡（tab），判断代码为：

if (!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {...}

然后添加一个动画样式：

nav.addClass('animate');

删除活动选项卡：

nav.find('ul li').removeClass('active');

最后移动活动选项卡位置下面的线状div到点击的选项卡位置。

完整JavaScript代码

var nav = $('nav');
var line = $('<div />').addClass('line');

line.appendTo(nav);

var active = nav.find('.active');
var pos = 0;
var wid = 0;

if (active.length) {
  pos = active.position().left;
  wid = active.width();
  line.css({
    left: pos,
    width: wid });

}

nav.find('ul li a').click(function (e) {
  e.preventDefault();
  if (!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {

    nav.addClass('animate');

    var _this = $(this);

    nav.find('ul li').removeClass('active');

    var position = _this.parent().position();
    var width = _this.parent().width();

    if (position.left >= pos) {
      line.animate({
        width: position.left - pos + width },
      300, function () {
        line.animate({
          width: width,
          left: position.left },
        150, function () {
          nav.removeClass('animate');
        });
        _this.parent().addClass('active');
      });
    } else {
      line.animate({
        left: position.left,
        width: pos - position.left + wid },
      300, function () {
        line.animate({
          width: width },
        150, function () {
          nav.removeClass('animate');
        });
        _this.parent().addClass('active');
      });
    }

    pos = position.left;
    wid = width;
  }
});