這是一個Jquery的下拉菜單實例代碼.
效果圖:
點擊這裡查看效果:http:///keleyi/phtml/keleyijquerymenu.htm
保存以下的代碼為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下拉菜單實例</title>
<link rel="stylesheet" href="http:///keleyi/pmedia/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http:///keleyi/pmedia/menu.js"></script>
</head>
<body>
<div id="container">
<!-- 分類菜單 START -->
<div id="menubar">
<ul id="menus" class="menus">
<li class="current-cat"><a title="Home" href="http:///">首頁</a></li>
<li class="cat-item cat-item-40"><a href="javascript:void(0);" title="View all posts filed under .Net">.Net</a>
<ul class="children">
<li class="cat-item cat-item-41"><a href="javascript:void(0);" title="View all posts filed under ADO.NET">ADO.NET</a></li>
<li class="cat-item cat-item-42"><a href="javascript:void(0);" title="View all posts filed under ASP.NET">ASP.NET</a></li>
<li class="cat-item cat-item-43"><a href="http://" title="View all posts filed under C#">C#</a></li>
</ul>
</li>
<li class="cat-item cat-item-50"><a href="http://" title="View all posts filed under Java">Java</a>
<ul class="children">
<li class="cat-item cat-item-51"><a href="javascript:void(0);" title="View all posts filed under EJB">EJB</a></li>
<li class="cat-item cat-item-52"><a href="javascript:void(0);" title="View all posts filed under Hibernate">Hibernate</a></li>
<li class="cat-item cat-item-53"><a href="javascript:void(0);" title="View all posts filed under Java core">Java core</a></li>
<li class="cat-item cat-item-54"><a href="javascript:void(0);" title="View all posts filed under JSP">JSP</a></li>
<li class="cat-item cat-item-55"><a href="javascript:void(0);" title="View all posts filed under Spring">Spring</a></li>
<li class="cat-item cat-item-56"><a href="javascript:void(0);" title="View all posts filed under Struts">Struts</a></li>
</ul>
</li>
<li class="cat-item cat-item-60"><a href="javascript:void(0);" title="View all posts filed under Web">Web</a>
<ul class="children">
<li class="cat-item cat-item-61"><a href="javascript:void(0);" title="View all posts filed under (X)HTML">(X)HTML</a></li>
<li class="cat-item cat-item-62"><a href="javascript:void(0);" title="View all posts filed under ACSS">CSS</a></li>
<li class="cat-item cat-item-63"><a href="javascript:void(0);" title="View all posts filed under PHP">PHP</a></li>
<li class="cat-item cat-item-64"><a href="http://" title="View all posts filed under JavaScript">JavaScript</a></li>
</ul>
</li>
</ul>
</div>
<!-- 分類菜單 END -->
<div style="clear:both;"></div>
<div id="content">
<h2>Jquery下拉菜單</h2>
<p>這是一個Jquery下拉菜單實例,歡迎訪問網站獲取更多Jquery菜單!網址:www.
</p>
<p></p>
<p>Copyright © <a href="http:///" style="color:Black;text-decoration:none;"></a></p>
</div>
</div>
</body>
</html>