聖誕快樂(1):<br>nav設定

一、nav區:準備工作

S1:準備工作

<nav>
	<ul class="nav">
		<li class="on"><a href="#">Menu01</a></li>
		<li><a href="#">Menu02</a></li>
		<li><a href="#">Menu03</a></li>
		<li><a href="#">Menu04</a></li>
	</ul>
	<div class="on"><img src="img/slider01.jpg" /></div>
	<div><img src="img/slider02.jpg" /></div>
	<div><img src="img/slider03.jpg" /></div>
	<div><img src="img/slider04.jpg" /></div>
</nav>
* { padding: 0;margin: 0; }
ul li { list-style-type: none;  }
a { color: inherit; text-decoration: none; } 

/*nav========================================================*/
nav .nav {
	position: absolute; top: 0; right: 0;
	border-left: 1px solid #DADADA; letter-spacing: 1px; box-shadow: inset 1px 0 #fff;
}
nav .nav li {
	border-right: 1px solid #DADADA;  box-shadow: 1px 0 #fff; line-height: 70px;
	float: left; position: relative;
}
nav .nav a {
	outline: none; text-align: center; 
	display: block; position: relative; width: 120px;
	z-index: 10;  transition: all .5s;
}
nav .nav .on a { background-color: #d81b60; color: #ffffff;}
nav .nav .hover a { background-color: #009688; color: #ffffff;}
nav .nav li{position:relative; }
nav>div{position: absolute; top: 70px; left: 0;  }
nav img{width: 100%; height: auto;box-shadow: 0 -1px 5px #000; 0 1px 5px #000;}

S2:新增【下方指向器】

/*新增項目*/
nav>div{opacity: 0; }

nav li:after { content: ''; 
			border-top: 10px solid ;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			position: absolute; bottom: -10px; left: 50%; margin-left: -10px; z-index: 1;}
nav li:after{border-top: 10px solid transparent ;}
nav li.on:after{border-top: 10px solid #d81b60 ;}
nav li.hover:after{border-top: 10px solid #009688 ;}
$('nav div:eq(0)').css('opacity',1);

S3:nav 滑入、按下情形

//nav 滑入、按下
var $li = $('.nav li').hover(
	function(){$(this).addClass('hover').siblings('.hover').removeClass('hover'); }
	,function(){$(this).removeClass('hover');})
.click(function(){
$(this).addClass('on').siblings('.on').removeClass('on');
	$('nav>div').eq($(this).index()).animate({opacity:1},1000)
				.siblings('div').animate({opacity:0},500);
});