卡卡網(wǎng)

本文介紹一個(gè)CSS實(shí)現(xiàn)的菜單(menu)或選項(xiàng)卡(tab)切換時(shí)流動(dòng)過渡的效果，你可能在不少網(wǎng)站上看到過。

效果圖

demodownload

實(shí)例介紹

CSS實(shí)現(xiàn)的菜單（menu）或選項(xiàng)卡（tab），當(dāng)切換時(shí)，有一個(gè)流體過渡效果，這是本文要介紹的重點(diǎn)。

HTML代碼

選項(xiàng)卡外標(biāo)簽是<nav></nav>，盒子容器是<ul></ul>，活動(dòng)項(xiàng)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主要是菜單/選項(xiàng)卡整體定位作用以及外觀樣式的設(shè)置。nav .line是流體線的樣式設(shè)置。nav ul是盒子樣式設(shè)置。nav ul li是各個(gè)菜單/項(xiàng)目的樣式設(shè)置。

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

本實(shí)例需要用到JavaScript編程，它實(shí)現(xiàn)了流體的動(dòng)畫效果。實(shí)現(xiàn)原理：

對(duì)于活動(dòng)選項(xiàng)卡

查找nav盒子里的活動(dòng)選項(xiàng)卡.active，然后在其位置下面添加一個(gè)線狀（css類為.line）的div。

點(diǎn)擊切換選項(xiàng)卡時(shí)

觸發(fā)代碼為

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

先找到非活動(dòng)選項(xiàng)卡，同時(shí)也非點(diǎn)擊的選項(xiàng)卡（tab），判斷代碼為：

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

然后添加一個(gè)動(dòng)畫樣式：

nav.addClass('animate');

刪除活動(dòng)選項(xiàng)卡：

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

最后移動(dòng)活動(dòng)選項(xiàng)卡位置下面的線狀div到點(diǎn)擊的選項(xiàng)卡位置。

完整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;
  }
});

總結(jié)

本文介紹了CSS實(shí)現(xiàn)的菜單/選項(xiàng)卡(tab)切換時(shí)流體過渡效果，該效果需要用JavaScript實(shí)現(xiàn)，喜歡的朋友可以收藏本頁，或下載源碼保存?zhèn)溆谩?/p>

相關(guān)文章

• 如何僅使用HTML和CSS創(chuàng)建自定義Tab選項(xiàng)卡
• 6款精美漂亮的CSS Tabs選項(xiàng)卡【實(shí)例演示/源碼下載】
• 10款純CSS Tabs選項(xiàng)卡【實(shí)例演示/源碼下載】

標(biāo)簽: css  選項(xiàng)卡  Tab選項(xiàng)卡  內(nèi)容選項(xiàng)卡  過渡效果