效果預覽：http:///keleyi/phtml/html5/15/
有都中顏色可供選擇，請使用支持HTML5/CSS3的浏覽器訪問。
HTML源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery和css3滑動導航菜單-</title><base target="_blank" />
<link type="text/css" rel="stylesheet" media="all" href="http:///keleyi/phtml/html5/15/css/keleyi.css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script src="http:///keleyi/phtml/html5/15/js/keleyi.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div class="header">
<h1><a href="http://"><img src="http:///keleyi/phtml/html5/15/images/logo-small.png" /></a>jquery和css3滑動導航菜單 CSS3 Fancy Menu / keleyi Menu</h1>
<p>請使用支持HTML5/CSS3的浏覽器訪問本頁。A CSS3 Experiment by <a href="http://">insicdesigns</a></p>
</div>
<div class="keleyi" >
<ul>
<li class="active"><a href="http:///menu/net/" >.NET</a></li><li><a href="http:///menu/javascript/" >Javascript</a></li><li><a href="http:///menu/jquery/" >jQuery</a></li><li><a href="http:///menu/csharp/" >C#</a></li><li><a href="http:///menu/aspnet/" >ASP.NET</a></li><li><a href="http:///menu/mvc/" >MVC</a></li><li><a href="http:///menu/html5/" >HTML5</a></li>
<li><a href="http:///menu/webqd/" >web前端</a></li><li><a href="http:///menu/cpp/" >C++</a></li>
<li><a href="http:///ziliao/js/zzbds.htm">JS正則表達式</a></li></ul>
<div class="floatr"></div>
</div>
<h2>Experimenting with colors <a href="http:///a/bjac/21poi7ce.htm">原文</a></h2>
<p>Gradients can only be seen on Webkit browser (Chrome, Safari).</p>
<div class="keleyi magenta">
<ul >
<li class="active"><a href="http:///">Home</a></li>
<li><a href="http:///about/">About</a></li>
<li><a href="http:///game/1/">捕魚</a></li>
<li><a href="http:///a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>
<li><a href="http:///a/bjac/182di68b.htm">導航樣式</a></li>
<li><a href="http:///a/bjac/mt97p5y9.htm">側邊導航</a></li>
<li><a href="http:///dev/3068696139522ae4.htm">樹形菜單</a></li>
<li><a href="http:///game/4/">美女拼圖</a></li>
<li><a href="http:///keleyi/phtml/silverlight/">猜數字</a></li>
</ul>
<div class="floatr"></div>
</div>
<br />
<div class="keleyi cyan">
<ul >
<li class="active"><a href="http:///a/bjac/4pdfle7v.htm">動畫導航菜單</a></li><li><a href="http:///a/bjac/nk1dr8xn.htm">window的高寬</a></li>
<li><a href="http:///a/bjac/cx165ov3.htm">jQuery的使用</a></li><li><a href="http:///a/bjac/4saw3kmj.htm">jQ優勢與不足</a></li>
<li><a href="http:///a/bjac/25mku22l.htm">jQuery介紹</a></li><li><a href="http:///a/bjac/6c5snbtc.htm">div子元素</a></li>
<li><a href="http:///a/bjac/8p1g5yeq.htm">JQ鼠標位置</a></li>
</ul>
<div class="floatr"></div>
</div>
<br />
<div class="keleyi yellow">
<ul >
<li class="active"><a href="http://keleyi.cn">三級菜單</a></li><li><a href="http:///a/bjac/mnmpm4bv.htm">圖片走馬燈</a></li><li><a href="http:///a/bjac/90b914o0.htm">jQ的toggle</a></li>
<li><a href="http:///a/bjac/bg0m15bi.htm">jQ方法on()</a></li><li><a href="http:///a/bjac/scdm44l9.htm">側邊欄導航</a></li><li><a href="http:///a/bjac/1ln3kvac.htm">jQ的live()</a></li>
<li><a href="http:///a/bjac/n5kb0y0j.htm">jQ的find()</a></li><li><a href="http:///a/bjac/4013kn5s.htm">jquery的on</a></li>
</ul>
<div class="floatr"></div>
</div>
<br />
<div class="keleyi orange">
<ul >
<li class="active"><a href="http:///a/bjac/mt97p5y9.htm">側邊導航欄</a></li><li><a href="http:///a/bjac/phhq4ecr.htm">當前時間</a></li>
<li><a href="http:///a/bjac/1juhjegr.htm">替換圖片</a></li><li><a href="http:///a/bjac/c6gu08gm.htm" title="jQuery友善的圖片輪播(含首頁和尾頁)">圖片輪播</a></li><li><a href="http:///a/bjac/opnw2awa.htm">appendTo方法</a></li>
<li><a href="http:///a/bjac/0vpch15n.htm">jQ的append</a></li><li><a href="http:///a/bjac/cfyxd60g.htm">jQ的after</a></li>
<li><a href="http:///a/bjac/m9xwhxv2.htm">判斷是否為空</a></li>
</ul>
<div class="floatr"></div>
</div>
<br />
<div class="keleyi dark">
<ul >
<li class="active"><a href="http:///a/bjac/2oncd079.htm" title="jQ函數after、append、appendTo的區別">after、append</a></li><li><a href="http:///a/bjac/db2b8j9b.htm">JQUERY ajax</a></li>
<li><a href="http:///a/bjac/dbjlg7nf.htm" title="jQuery表單驗證插件 jQuery.validity">表單驗證插件</a></li>
<li><a href="http:///a/bjac/otjlqc2l.htm">jquery ajax</a></li><li><a href="http:///a/bjac/3wdrld0b.htm">removeAttr</a></li>
<li><a href="http:///a/bjac/lx3u7na0.htm">使a鏈無效</a></li><li><a href="http:///a/bjac/4prgqlce.htm">ready的簡寫</a></li>
</ul>
<div class="floatr"></div>
</div>
</div>
</body>
</html>