本文實例講述了jQuery實現簡單的列表式導航菜單效果代碼。分享給大家供大家參考。具體如下：
這里使用jQuery實現簡單的列表式導航菜單，是根據網上的一個教程，邊看邊寫的，經過了修正，拷貝代碼即可使用。主要實現包括三個部分，一是CSS、二是引入jQuery、三是編寫JS代碼進行jQuery控件。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-simple-list-style-nav-menu-codes/
具體代碼如下：
<html><head><title>jQuery實現簡單的列表導航菜單</title><script type='text/javascript' src='jquery-1.6.2.min.js'></script><style type="text/css">body{font-size:13px}ul,li{list-style-type:none;padding:0px;margin:0px}.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc} .content{padding-top:10px;clear:left} a{text-decoration:none;color:#666;padding:10px}.optnFocus{background-color:#fff;font-weight:bold}div{padding:10px}div img{float:left;padding-right:6px}span{padding-top:3px;font-size:14px;font-weight:bold;float:left}.tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;background-color:#fff;display:none}.tip li{line-height:23px;}#sort{position:absolute;display:none}</style> <script type="text/javascript"> $(function() { var curY; //獲取所選項的Top值 var curH; //獲取所選項的Height值 var curW; //獲取所選項的Width值 var srtY; //設置提示箭頭的Top值 var srtX; //設置提示箭頭的Left值 var objL; //獲取當前對象 /* *設置當前位置數值 *參數obj為當前對象名稱 */ function setInitValue(obj) { curY = obj.offset().top curH = obj.height(); curW = obj.width(); srtY = curY + (curH / 2) + "px"; //設置提示箭頭的Top值 srtX = curW - 5 + "px"; //設置提示箭頭的Left值 } $(".optn").mouseover(function() {//設置當前所選項的鼠標滑過事件 objL = $(this); //獲取當前對象 setInitValue(objL); //設置當前位置 var allY = curY - curH + "px"; //設置提示框的Top值 objL.addClass("optnFocus"); //增加獲取焦點時的樣式 objL.next("ul").show().css({ "top": allY, "left": curW }) //顯示并設置提示框的坐標 $("#sort").show().css({ "top": srtY, "left": srtX }); //顯示并設置提示箭頭的坐標 }) .mouseout(function() {//設置當前所選項的鼠標移出事件 $(this).removeClass("optnFocus"); //刪除獲取焦點時的樣式 $(this).next("ul").hide(); //隱藏提示框 $("#sort").hide(); //隱藏提示箭頭 }) $(".tip").mousemove(function() { $(this).show(); //顯示提示框 objL = $(this).prev("li"); //獲取當前的上級li對象 setInitValue(objL); //設置當前位置 objL.addClass("optnFocus"); //增加上級li對象獲取焦點時的樣式 $("#sort").show().css({ "top": srtY, "left": srtX }); //顯示并設置提示箭頭的坐標 }) .mouseout(function() { $(this).hide(); //隱藏提示框 $(this).prev("li").removeClass("optnFocus"); //刪除獲取焦點時的樣式 $("#sort").hide(); //隱藏提示箭頭 }) }) </script> </head><body><ul> <li class="menu"> <div> <img alt="" src="images/icon.gif" /> <span>精品源碼下載社區</span> </div> <ul class="content"> <li class="optn"><a href="#">Visual C#</a></li> <ul class="tip"> <li><a href="#">數據庫</a></li> <li><a href="#">系統控制</a></li> <li><a href="#">多媒體</a></li> <li><a href="#">字符處理</a></li> <li><a href="#">打印輸出</a></li> </ul> <li class="optn"><a href="#">Delphi</a></li> <ul class="tip"> <li><a href="#">圖像處理</a></li> <li><a href="#">窗體設計</a></li> <li><a href="#">數據庫應用</a></li> <li><a href="#">初學實例</a></li> </ul> <li class="optn"><a href="#">VC++</a></li> <ul class="tip"> <li><a href="#">系統控制</a></li> <li><a href="#">數據庫應用</a></li> <li><a href="#">電腦軟件3</a></li> <li><a href="#">字符處理</a></li> <li><a href="#">電腦軟件5</a></li> </ul> <li class="optn"><a href="#">VisualBasic</a></li> <ul class="tip"> <li><a href="#">系統控制</a></li> <li><a href="#">網絡編程</a></li> <li><a href="#">窗口界面</a></li> <li><a href="#">控件組件</a></li> <li><a href="#">圖像編程</a></li> </ul> </ul> <img id="sort" src="images/sort.gif" alt=""/> </li> </ul></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
