本文分享一個帶動畫效果的中英文切換導(dǎo)航條。

鼠標(biāo)放上去試一下：

• INDEX 首頁
• BBS 社區(qū)
• HOME 我

?

1.用CSS3實現(xiàn)

效果看上去復(fù)雜，其實我們先來做出一個樣式，就很簡單了。如下：

?代碼：

<nav><ul class="list"><li><a href="#"><b>INDEX</b><i>首頁</i></a></li><li><a href="#"><b>BBS</b><i>社區(qū)</i></a></li><li><a href="#"><b>HOME</b><i>我</i></a></li></ul></nav> *{padding: 0;margin:0; } li{list-style: none; } a{text-decoration: none; } nav{width:100%;height:40px;background:#222;margin-top:100px; } .list{width: 1000px;height:40px;margin: 0 auto; } .list li{float: left;} .list li a{display: block; } .list b,i{display: block;padding: 0 30px;color: #aaa;line-height: 40px;text-align: center;} .list b{font-weight: 100x; } .list i{font-style: normal;background: #333;color: #fff; }

此時再來實現(xiàn)上面的效果，只需要加一個a:hover選擇器，讓鼠標(biāo)指向一個菜單時，li向上移動

.list a:hover{margin-top: -40px; }

• INDEX 首頁
• BBS 社區(qū)
• HOME 我

?

?

此時的變化還很生硬，再來加一個動畫效果：

.list li a{transition: 0.3s; }

?然后將多余的隱藏：

nav{overflow: hidden; }

?

?大功告成！但是transition在ie上支持的不是很好，所以我們再來分享一個jQuery的實現(xiàn)。

2.jQuery實現(xiàn)：

利用jQuery代替css實現(xiàn)hover和transition效果，直接看代碼：

$(function(){$(".list a").hover(function(){$(this).stop().animate({"margin-top":-40},300)},function(){$(this).stop().animate({"margin-top":0},300)}) })

?效果是一樣的。

以上。

轉(zhuǎn)載于:https://www.cnblogs.com/weirihan/p/6034933.html

總結(jié)

以上是生活随笔為你收集整理的来一个炫酷的导航条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。