先前在Apple的官網中，發現到當畫面滾到上方的導覽列選單，不但導覽列變透明，甚至滾進去的畫面還會有磨砂效果，雖然是個小小的特效，但卻幫網頁大大的加分，而最近梅干又發現到，當點選選單的按鈕圖示時，原來的二條線，則會動態變成叉叉，讓使用者知道，點叉叉就可將選單給收起來，這是一個相當貼心的設計，同時又符合使用者經驗。
其實這個特效，只是將圖示加入了CSS3動畫，讓使用點了選單圖示後，再將上下的二條選單線，旋轉45度後，就可形成交叉的樣子，最後再搭配transition，就可實現將原來的二條平行線，變成交叉線啦！而梅干也把這個特效移植到Bootstrap的導覽列中，讓Bootstrap也有此效果，這真的只能說Apple官網處處有驚奇，因此想知道這效果怎作出來的朋友，也一塊來看看囉！
Step1
首先將下方的CSS3動畫加到style的樣式中，由於Bootstrap內建的導覽列選單圖示，共有三條，所以上下二條旋轉，中間那條就向左飛出。
[css]
.navbar-toggle .icon-bar {
position: relative;
transition: all 500ms ease-in-out;
}
/第一條旋轉45度/
.navbar-toggle.active .icon-bar:nth-of-type(1) {
top: 6px;
transform: rotate(45deg);
}
/第二條向左飛出/
.navbar-toggle.active .icon-bar:nth-of-type(2) {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
/第三條反轉45度/
.navbar-toggle.active .icon-bar:nth-of-type(3) {
top: -6px;
transform: rotate(-45deg);
}
[/css]
Step2
接著再把下方的Javascript放在/body前方。
[javascript]
$(function(){
$(".navbar-toggle").on("click", function () {
$(this).toggleClass("active");
});
})
[/javascript]
Step3
最後再把Bootstrap的導覽列選單加入到body裡。
[html]
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Minwt</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">連結1</a></li>
<li><a href="#">連結2</a></li>
<li><a href="#">連結3</a></li>
</ul>
</div>
</div>
</nav>
[/html]
Step4
這樣就大功告成啦！當點選單按鈕圖示時，就會變成叉叉，再點叉叉就會再回到原來的選單圖示，是不是超簡單的呀！有在用Bootstrap的朋友，不妨也可試試看囉！
