|
|
|
|
|
本文介紹一個CSS實現(xiàn)的菜單(menu)或選項卡(tab)切換時流動過渡的效果,你可能在不少網(wǎng)站上看到過。
效果圖
實例介紹
CSS實現(xiàn)的菜單(menu)或選項卡(tab),當(dāng)切換時,有一個流體過渡效果,這是本文要介紹的重點(diǎn)。
HTML代碼
選項卡外標(biāo)簽是<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
主要是菜單/選項卡整體定位作用以及外觀樣式的設(shè)置。nav .line
是流體線的樣式設(shè)置。nav ul
是盒子樣式設(shè)置。nav ul li
是各個菜單/項目的樣式設(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
本實例需要用到JavaScript編程,它實現(xiàn)了流體的動畫效果。實現(xiàn)原理:
查找nav
盒子里的活動選項卡.active
,然后在其位置下面添加一個線狀(css類為.line
)的div
。
觸發(fā)代碼為
nav.find('ul li a').click(function (e) {
...
});
先找到非活動選項卡,同時也非點(diǎn)擊的選項卡(tab),判斷代碼為:
if (!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {...}
然后添加一個動畫樣式:
nav.addClass('animate');
刪除活動選項卡:
nav.find('ul li').removeClass('active');
最后移動活動選項卡位置下面的線狀div
到點(diǎn)擊的選項卡位置。
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實現(xiàn)的菜單/選項卡(tab)切換時流體過渡效果,該效果需要用JavaScript實現(xiàn),喜歡的朋友可以收藏本頁,或下載源碼保存?zhèn)溆谩?/p>
相關(guān)文章