效果預覽：http:///keleyi/phtml/css3menu/index.htm
HTML文件代碼：
<!doctype html>
<html>
<head>
<title> CSS3+jQuery實現3D下拉菜單-</title><base target="_blank" />
<link rel="stylesheet" href="http:///keleyi/phtml/css3menu/index/css/style.css">
</head>
<body>
<header class="header">
<hgroup>
<h1>3D下拉菜單</h1>
<h2>CSS3+jQuery實現CSS 3D動畫效果</h2>
</hgroup>
</header>
<section class="demo">
<dl class="list nigiri">
<dt>內容導航</dt>
<dd><a href="http:///menu/net/" >.NET</a></dd><dd><a href="http:///menu/javascript/" >Javascript</a></dd><dd><a href="http:///menu/jquery/" >jQuery</a></dd><dd><a href="http:///menu/csharp/" >C#</a></dd><dd><a href="http:///menu/aspnet/" >ASP.NET</a></dd><dd><a href="http:///menu/mvc/" >MVC</a></dd><dd><a href="http:///menu/html5/" >HTML5</a></dd>
<dd><a href="http:///menu/webqd/" >web前端</a></dd><dd><a href="http:///menu/cpp/" >C++</a></dd>
<dd><a href="http:///menu/flhz/">分類匯總</a></dd>
</dl>
<dl class="list maki">
<dt>游戲</dt>
<dd><a href="http:///">Home</a></dd>
<dd><a href="http:///about/">About</a></dd>
<dd><a href="http:///game/1/">捕魚</a></dd>
<dd><a href="http:///a/bjac/kjsrt3b0.htm">jQuery AJAX</a></dd>
<dd><a href="http:///a/bjac/182di68b.htm">導航樣式</a></dd>
<dd><a href="http:///a/bjac/mt97p5y9.htm">側邊導航</a></dd>
<dd><a href="http:///dev/3068696139522ae4.htm">樹形菜單</a></dd>
<dd><a href="http:///game/4/">美女拼圖</a></dd>
<dd><a href="http:///keleyi/phtml/silverlight/">猜數字</a></dd>
<dd><a href="http:///game/2/">不上不下</a></dd>
<dd><a href="http:///game/3/">打地鼠</a></dd>
</dl>
<dl class="list sashimi">
<dt>更多特效</dt>
<dd><a href="http:///a/bjac/mt97p5y9.htm">側邊導航欄</a></dd><dd><a href="http:///a/bjac/phhq4ecr.htm">當前時間</a></dd>
<dd><a href="http:///a/bjac/1juhjegr.htm">替換圖片</a></dd><dd><a href="http:///a/bjac/c6gu08gm.htm" title="jQuery友善的圖片輪播(含首頁和尾頁)">圖片輪播</a></dd><dd><a href="http:///a/bjac/opnw2awa.htm">appendTo方法</a></dd>
<dd><a href="http:///a/bjac/0vpch15n.htm">jQ的append</a></dd><dd><a href="http:///a/bjac/cfyxd60g.htm">jQ的after</a></dd>
<dd><a href="http:///a/bjac/m9xwhxv2.htm">判斷是否為空</a></dd><dd><a href="http://keleyi.cn">三級菜單</a></dd><dd><a href="http:///a/bjac/mnmpm4bv.htm">圖片走馬燈</a></dd><dd><a href="http:///a/bjac/90b914o0.htm">jQ的toggle</a></dd>
</dl>
<a href="javascript:;" class="toggle" target="_self">菜單開關</a>
</section>
<div class="warning">
<div class="message">
<h1>浏覽器不支持CSS 3D效果</h1>
<p>浏覽器不支持CSS 3D效果，請使用chrome或Firefox浏覽器查看本頁。</p>
</div>
</div>
<div style="width:100%;height:100%;background:orange"><br /><br /><br /><br /><br /><a href="http:///a/bjac/e7i8pvwq.htm">http:///a/bjac/e7i8pvwq.htm</a></div>
<a href="http://" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http:///keleyi/phtml/css3menu/index/keleyi_right_darkblue.png" alt=""></a>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http:///keleyi/phtml/css3menu/index/js/makisu.min.js"></script>
<script type="text/javascript">
// The `enabled` flag will be `false` if CSS 3D isn't available
if ( $.fn.makisu.enabled ) {
var $sashimi = $( '.sashimi' );
var $nigiri = $( '.nigiri' );
var $maki = $( '.maki' );
// Create Makisus
$nigiri.makisu({
selector: 'dd',
overlap: 0.85,
speed: 1.7
});
$maki.makisu({
selector: 'dd',
overlap: 0.6,
speed: 0.85
});
$sashimi.makisu({
selector: 'dd',
overlap: 0.2,
speed: 0.5
});
// Open all
$( '.list' ).makisu( 'open' );
// Toggle on click
$( '.toggle' ).on( 'click', function() {
$( '.list' ).makisu( 'toggle' );
});
} else {
$( '.warning' ).show();
}
</script>
</body>
</html>