topNav置頂(index)

JDX_ex4(index):topNav置頂

範例結果

jdx0401

一、基本結構設定

(一)加入logo及NAV至index.html中

置於<header></header>之內

<header>
  <nav id="topNav">
    <h1 id="logo"><a href="#"></a></h1>
    <ul id="nav">
      <li><a href="javascript:;" data-naven="Home">首頁</a></li>
      <li><a href="javascript:;" data-naven="New Arrival">最新上架</a></li>
      <li><a href="javascript:;" data-naven="Recommend Top">主題推薦</a></li>
      <li><a href="javascript:;" data-naven="About Us">關於我們</a></li>
    </ul>
  </nav>
</header>
<div id="goTop"></div>
/*==#NAV區塊==================*/
nav{background:#4a148c; 
	   position:relative; height:60px; box-shadow:0 2px 10px #363636;}
nav *{transition:all .5s; }	   
#logo{
	background:url(../images/logoL.png) no-repeat ; background-size:contain;
	 width:350px; height:250px;
	position:absolute; 	left:50px; 	top:-150px; cursor:pointer; z-index:99; 
}
#logo:hover{ background:url(../images/logoLhover.png) no-repeat;background-size:contain;}
#logo:before{ content:""; width:80px; height:80px;
	background:url(../images/logoLt.png) no-repeat; background-size: contain;
	position:absolute; left:90px; top:0px;
}
#logo:after{ content:""; width:80px; height:80px;
	background:url(../images/logoLt.png) no-repeat; background-size: contain;
	position:absolute; left:155px; top:-10px;
}
#logo:hover:before{
	animation:logomL 2s  linear infinite;
}
#logo:hover:after{
	animation:logomR 2s  linear infinite;
}

@keyframes logomL{
	0%{ transform:rotate(0deg);}
	100%{ transform:rotate(360deg);}
}
@keyframes logomR{
	0%{ transform:rotate(360deg);}
	100%{ transform:rotate(0deg);}
}
#logo a{display:block; width:100%; height:100%;}
#nav{ position:absolute; right:50px; top:0px; overflow:hidden; z-index:99; }
#nav>li{ float:left;}
#nav>li>a{ display:block; font-size:18px; line-height:60px;
		text-align:center; padding:0 10px; color:#FFFFFF;}
#nav>li>a:hover{ background:#ce93d8; box-shadow:0 0 5px #000000 inset; color:#4a148c;}

#nav ul{
	width:100%; background:#747272;
	position:absolute; top:60px; left:0; z-index:99;
}
/*goTop==================================================================*/
#goTop{
	position:fixed; bottom:10px; right:10px; width:90px; height:90px;
	background: url(../images/gotop.png) no-repeat; background-size:contain;
	cursor:pointer;
}

(二)調整header內元素

jdx04_index_nav01 jdx04_index_nav02

$('#sliderBg').insertBefore('nav');