Create a Realistic Hover Effect With jQuery 動態選單

Create a Realistic Hover Effect With jQuery 利用 jQuery 框架和 jQuery UI 配合，為一組圖標連結加入當滑鼠移過時，圖標會產生上升以及倒影的效果。就像是 Mac 系統中的選單 dock 的類似樣式，在網頁上適合當主要的功能選單提供給使用者炫麗的效果。

使用方法：
第一步 載入 Create a Realistic Hover Effect 需要用到的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 使用 Google AJAX API 取得 jQuery UI 1.9.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


第二步 設計 HTML 選單
<div id="content">
<h1>Reflection</h1>
<ul id="nav-reflection">
<li class="button-color-1"><a href="#" title="My fancy link">Link Text</a></li>
<li class="button-color-2"><a href="#" title="My fancy link">Link Text</a></li>
<li class="button-color-3"><a href="#" title="My fancy link">Link Text</a></li>
<li class="button-color-4"><a href="#" title="My fancy link">Link Text</a></li>
</ul><!-- end reflection navigation -->
<h1>Shadow</h1>
<ul id="nav-shadow">
<li class="button-color-1"><a href="#" title="My fancy link">Link Text</a></li>
<li class="button-color-2"><a href="#" title="My fancy link">Link Text</a></li>
<li class="button-color-3"><a href="#" title="My fancy link">Link Text</a></li>
<li class="button-color-4"><a href="#" title="My fancy link">Link Text</a></li>
</ul><!-- end shadow navigation -->
</div>

第三步 設計選單的 CSS 樣式表
<style>
body {
font: 12px/1.5 Georgia, Palatino, "Palatino Linotype", serif;
background: #eaf5ff;
color: #555;
}
#content {
width: 800px;
margin: 30px auto;
}
h1 {
font-size: 20px;
color: #7f2d2d;
text-align: center;
}
p {
margin-top: 30px;
text-align: center;
}
a, a:visited {
color: #a02929;
text-decoration: none;
font-variant: small-caps;
text-transform: lowercase;
border-bottom: 1px dotted #333;
}
a:hover {
color: #000;
text-decoration: none;
}
#nav-reflection {
margin: 0 auto 50px auto;
padding: 50px 0 0 172px;
width: 452px;
min-height: 130px;
background: url(../images/page-shadow.jpg) top center no-repeat;
list-style: none;
}
#nav-reflection li {
margin-right: 15px;
width: 59px;
float: left;
}
#nav-reflection a, #nav-reflection a:visited, #nav-reflection a:hover {
width: 59px;
height: 59px;
text-indent: -9999px;
overflow: hidden;
border: 0;
background: url(../images/icons.png) no-repeat;
display: block;
}

#nav-reflection span {
margin-top: 1px;
width: 59px;
height: 34px;
text-align: center;
background: url(../images/icons-reflections.jpg) no-repeat;
display: block;
}

/* Button Colors */

#nav-reflection li.button-color-1 a {
background-position: -3px -3px;
}

#nav-reflection li.button-color-2 a {
background-position: -92px -3px;
}

#nav-reflection li.button-color-3 a {
background-position: -181px -3px;
}

#nav-reflection li.button-color-4 a {
background-position: -270px -3px;
}

/* Button Reflection Color */

#nav-reflection li.button-color-1 span {
background-position: 0 0;
}

#nav-reflection li.button-color-2 span {
background-position: -89px 0;
}

#nav-reflection li.button-color-3 span {
background-position: -178px 0;
}

#nav-reflection li.button-color-4 span {
background-position: -267px 0;
}


/* =Shadow Nav
-------------------------------------------------------------------------- */

#nav-shadow {
margin: 0 auto 30px auto;
padding: 50px 0 0 127px;
width: 497px;
min-height: 130px;
text-align: center;
background: url(../images/page-shadow.jpg) top center no-repeat;
list-style: none;
}

#nav-shadow li {
margin-right: 15px;
width: 81px;
height: 72px;
position: relative;
float: left;
}

#nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
margin: 0 auto;
width: 59px;
height: 59px;
text-indent: -9999px;
overflow: hidden;
border: 0;
background: url(../images/icons.png) no-repeat;
display: block;
position: relative;
z-index: 2;
}

/* Button Colors */

#nav-shadow li.button-color-1 a {
background-position: -3px -3px;
}

#nav-shadow li.button-color-2 a {
background-position: -92px -3px;
}

#nav-shadow li.button-color-3 a {
background-position: -181px -3px;
}

#nav-shadow li.button-color-4 a {
background-position: -270px -3px;
}

/* Button Shadow */

#nav-shadow li img.shadow {
margin: 0 auto;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}

第四步 寫入 JavaScript 的程式碼片段
$(document).ready(function() {
$("#nav-reflection li").append("<span></span>");
$("#nav-reflection a").hover(function() {
$(this).stop().animate({ marginTop: "-10px" }, 200);
$(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 300);
$(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
});
$("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />');
$("#nav-shadow li").hover(function() {
var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
},function(){
var e = this;
$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
$(e).find("a").animate({ marginTop: "0px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0", opacity: 1 }, 250);
});
});

作者網站：http://www.adrianpelletier.com
檔案大小：48 KB (包含範例)
檔案下載：http://adrianpelletier.com/sandbox/jquery_hover_nav/demo.zip
備份下載：下載