JQuery实现简单菜单

     JQuery真是个好东西！

     废话少说，直入正题。

 

1.menu.html

<textarea cols="83" rows="16" name="code" class="javascript:collapse">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;link type="text/css" rel="stylesheet" href="css.css" /&gt; &lt;script language="javascript" src="jquery.js" src="jquery.js"&gt;&lt;/script&gt; &lt;script language="javascript"&gt; $(document).ready(function(){ var arr = new Array("java","cplusplus","net","htm","php","flash"); for(var i=0;i&lt;arr.length;i++){ $("#" + arr[i] + "").bind("mouseover",{k:i},function(event){ $("#menu" + event.data.k).css("left", $("#" + arr[event.data.k]).offset().left - 40); $("#menu" + event.data.k).css("top" , $("#" + arr[event.data.k]).offset().top + 20); $("#"+ arr[event.data.k]).css("background-color","#999999"); $("#menu" + event.data.k).show(); } ); $("#" + arr[i] + "").bind("mouseout",{k:i},function(event){ $("#" + arr[event.data.k] + "").css("background-color","#cccccc"); $("#menu" + event.data.k).hide(); } ); } }); &lt;/script&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;div class="nav1"&gt;HOME&lt;/div&gt; &lt;div class="nav1" id="java"&gt;JAVA &lt;div class="menu" id="menu0"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" &gt;JAVA1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;JAVA2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;JAVA3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;JAVA4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;JAVA5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="nav1" id="cplusplus"&gt;C++ &lt;div class="menu" id="menu1"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;C++1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;C++2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;C++3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;C++4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;C++5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="nav1" id="net"&gt;.NET &lt;div class="menu" id="menu2"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" &gt;.NET1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;.NET2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;.NET3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;.NET4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;.NET5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="nav1" id="htm"&gt;HTML &lt;div class="menu" id="menu3"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" &gt;HTML1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;HTML2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;HTML3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;HTML4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;HTML5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="nav1" id="php"&gt;PHP &lt;div class="menu" id="menu4"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" &gt;PHP1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;PHP2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;PHP3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;PHP4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;PHP5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="nav1" id="flash"&gt;FLASH &lt;div class="menu" id="menu5"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" &gt;FLASH1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;FLASH2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;FLASH3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;FLASH4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" &gt;FLASH5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </textarea>

 

2.css.css

<textarea cols="84" rows="15" name="code" class="css:collapse:firstline[1]">body { font-family: Arial, Helvetica, sans-serif; } a:link{ color:#ffffff; text-decoration:none; } a:hover{ font-weight:bold; color:#FF0000; text-decoration:underline; } a:visited{ color:#ffffff; } li{ list-style:none; background-color:#999999; width:100px; height:20px; line-height:20px; } li:hover { background-color:#666666; } .nav1{ width:100px; height:20px; line-height:20px; list-style:none; float:left; text-align:center; background-color:#CCCCCC; } .menu{ position:absolute; display:none; }</textarea>