網頁設計, 網頁資源

Bootstrap教學-將Bootstrap導覽列加入如Apple官網點導覽列圖示變叉叉

2016/12/27
梅問題-Bootstrap教學-將Bootstrap導覽列加入如Apple官網點導覽列圖示變叉叉
  先前在Apple的官網中,發現到當畫面滾到上方的導覽列選單,不但導覽列變透明,甚至滾進去的畫面還會有磨砂效果,雖然是個小小的特效,但卻幫網頁大大的加分,而最近梅干又發現到,當點選選單的按鈕圖示時,原來的二條線,則會動態變成叉叉,讓使用者知道,點叉叉就可將選單給收起來,這是一個相當貼心的設計,同時又符合使用者經驗。
  其實這個特效,只是將圖示加入了CSS3動畫,讓使用點了選單圖示後,再將上下的二條選單線,旋轉45度後,就可形成交叉的樣子,最後再搭配transition,就可實現將原來的二條平行線,變成交叉線啦!而梅干也把這個特效移植到Bootstrap的導覽列中,讓Bootstrap也有此效果,這真的只能說Apple官網處處有驚奇,因此想知道這效果怎作出來的朋友,也一塊來看看囉!
Step1
首先將下方的CSS3動畫加到style的樣式中,由於Bootstrap內建的導覽列選單圖示,共有三條,所以上下二條旋轉,中間那條就向左飛出。
.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);
}	

Step2
接著再把下方的Javascript放在/body前方。 
$(function(){
	$(".navbar-toggle").on("click", function () {
		$(this).toggleClass("active");
	});
})

Step3
最後再把Bootstrap的導覽列選單加入到body裡。 
<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>

Step4
這樣就大功告成啦!當點選單按鈕圖示時,就會變成叉叉,再點叉叉就會再回到原來的選單圖示,是不是超簡單的呀!有在用Bootstrap的朋友,不妨也可試試看囉!
梅問題-Bootstrap教學-將Bootstrap導覽列加入如Apple官網點導覽列圖示變叉叉