本文實例講述了jQuery實現(xiàn)灰藍風(fēng)格標準二級下拉菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款基于jQuery實現(xiàn)的標準型二級菜單，是漂亮的灰-藍風(fēng)格下拉級聯(lián)菜單，代碼經(jīng)過了完美修正，目前兼容性已經(jīng)很不錯了，甚至不用修改，拷貝代碼你就可以用了。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-blue-color-style-nav-menu-codes/
具體代碼如下：
<!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><script type="text/javascript" src="jquery-1.6.2.min.js"></script><style type="text/css">body{ margin:0; padding:0; font-size:12px;}a:link { color:#1553a9; text-decoration: none;}a:visited { text-decoration:none; color: #1553a9;}a:hover { text-decoration:none; color: #f46662;}a:active { text-decoration: none; color:#f46662;}#main{ width:910px; margin:0 auto; }#menu{ margin-top:20px; position:absolute;}.m1{float:left; width:100px; text-align:center; color:#3a3a3a; background-color:#bcbcbc; border:#9a9b9b 1px solid; border-right:0; padding:10px; padding-top:13px; cursor:pointer;}.m1:hover{ background-color:#2c85e0; color:White;}.m2{ position:absolute; margin-top:39px; width:120px; background-color:#e4e4e4;border:#cdcece 1px solid;color:#666666; display:none;}.m2 table{ width:100%; line-height:35px;}.m2 table tr td{ text-align:center; border-top:#b4b4b4 1px dotted; cursor:pointer;}</style><script type="text/javascript">$(function(){$(".m1").mouseover(function(){ $(this).parent().next(".m2").fadeIn();}).mouseout(function(){ $(this).parent().next(".m2").css("display","none");});$(".m2").mouseover(function(){ $(this).css("display","block"); $(this).prev().children().css("background-color","#2c85e0").css("color","White");;}).mouseout(function(){ $(this).css("display","none"); $(this).prev().children().css("background-color","#bcbcbc").css("color","#3a3a3a");});});</script></head><body><div id="main"><div id="menu"><a href="#" target="_blank"><span class="m1">論壇首頁</span></a> <a href="#" target="_blank"><span class="m1">學(xué)生工作</span></a> <div class="m2" style="left:121px;"><table> <tr><td style="border:0"><a href="#" target="_blank">學(xué)院首頁</a></td></tr> <tr><td><a href="#" target="_blank">學(xué)院首頁</a></td></tr> <tr><td><a href="#" target="_blank">學(xué)院首頁</a></td></tr> </table></div> <a href="#" target="_blank"><span class="m1">師資隊伍</span></a> <div class="m2" style="left:242px;"><table> <tr><td style="border:0"><a href="#" target="_blank">學(xué)院首頁</a></td></tr> <tr><td><a href="#" target="_blank">學(xué)院首頁</a></td></tr> <tr><td><a href="#" target="_blank">學(xué)院首頁</a></td></tr> </table></div><a href="#" target="_blank"><span class="m1">學(xué)科專業(yè)</span></a> <div class="m2" style="left:363px;"><table> <tr><td style="border:0"><a href="#" target="_blank">本科專業(yè)</a></td></tr> <tr><td><a href="#" target="_blank">碩士專業(yè)</a></td></tr> <tr><td><a href="#" target="_blank">博士專業(yè)</a></td></tr> </table></div> <a href="#" target="_blank"><span class="m1">教學(xué)改革</span></a> <div class="m2" style="left:484px;"><table> <tr><td style="border:0"><a href="#" target="_blank">教學(xué)體制</a></td></tr> <tr><td><a href="#" target="_blank">學(xué)院首頁</a></td></tr> <tr><td><a href="#" target="_blank">科研教學(xué)</a></td></tr> </table></div> <a href="#" target="_blank"><span class="m1">黨建工作</span></a> <div class="m2" style="left:605px;"><table> <tr><td style="border:0"><a href="#" target="_blank">學(xué)生黨建</a></td></tr> <tr><td><a href="#" target="_blank">學(xué)院黨建</a></td></tr> </table></div> <a href="#" target="_blank"><span class="m1">聯(lián)系我們</span></a> <div class="m2" style="left:725px;"><table> <tr><td style="border:0"><a href="#" target="_blank">老師電話</a></td></tr> <tr><td><a href="#" target="_blank">領(lǐng)導(dǎo)傳真</a></td></tr> <tr><td><a href="#" target="_blank">學(xué)校地址</a></td></tr> <tr><td><a href="#" target="_blank">衛(wèi)星地圖</a></td></tr> </table></div></div></div></body></html>希望本文所述對大家的jquery程序設(shè)計有所幫助。
新聞熱點
疑難解答
