可以給img元素設置背景圖
648
2024-03-30
本文實例講述了jQuery實現的縱向下拉菜單。分享給大家供大家參考，具體如下：
當我們瀏覽網頁和使用word編輯一下文字的時候，我們都能看見橫向下拉的身影，有了橫向菜單，我們能對整個界面進行更好的布局，達到我們想要的效果，那么這些橫向菜單式如何用代碼實現的，當我們瀏覽或使用的時候她又是如何呈現在我們面前的，學習了JQuery之后，小編漸漸看到她美麗的容顏，接下來，小編主要講解如何通過jquery實現縱向下拉菜單。
第一步，我們來編寫html的代碼，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery實戰-菜單效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/jquery.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a >菜單項1</a>
<ul>
<li>
<a >子菜單項11</a>
</li>
<li>
<a >子菜單項12</a>
</li>
</ul>
</li>
<li class="main">
<a >菜單項2</a>
<ul>
<li>
<a >子菜單項21</a>
</li>
<li>
<a >子菜單項22</a>
</li>
</ul>
</li>
<li class="main">
<a >菜單項3</a>
<ul>
<li>
<a >子菜單項31</a>
</li>
<li>
<a >子菜單項32</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
我們來看一下運行效果：
上面的實現效果已經初步具有了縱向菜單的模型，但是似乎有不完美的地方，主菜單的前面有黑色的小圓點，子菜單前面有白色的小圓點，也沒有立體的效果，不用擔心css可以幫助我們解決上述的問題，接著，編寫css的代碼，如下所示：
ul,li{
/*清除ul和li上默認的小圓點*/
list-style:none;
}
ul{
/*清除子菜單的縮進值*/
padding:0;
margin:0;
}
.main{
background-image:url(../images/title.gif);
background-repeat:repeat-x;
width:120px;
}
li{
background-color:#EEEEEE;
}
a{
/*取消所有的下劃線*/
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main a{
color:white;
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
background-position:3px center;
}
.main li a{
color:black;
background-image:none;
}
.main ul{
display:none;
}
添加了css的代碼，在顯示的時候會有怎么樣的驚喜帶給我們呢？
上圖的顯示效果已經就更為接近我們的想好實現的效果了，但是這個還是不可以進行點擊的，所以我們還需要編寫js的代碼，相應的，在js中我們也要建立兩個文件，一個jquery一個menu，鑒于jquery的代碼較多，所以小編已經上傳相關資源，有需要的小伙伴可以點擊文末鏈接下載，接著，我們來編寫menu的代碼，來給整理頁面添加行為能力，代碼如下：
$(document).ready(function(){
//頁面中的DOM已經裝載完成時，執行的代碼
$(".main > a").click(function(){
//找到主要菜單項對應的子菜單項
var ulNode =$(this).next("ul");
/*
if(ulNode.css("display")=="none")
{
ulNode.css("display","block");
}else{
ulNode.css("display","none");
}
*/
/*菜單出現的動畫效果*/
ulNode.show("slow");//normal fast
//unlNode.hide();
//ulNode.toggle();
//
//ulNode.slideDown("slow");
//ulNode.slideUP;
ulNode.sildeToggle();
});
})
添加了js的代碼，現在實現的效果是不是和我們想象的一樣呢，如下圖所示：
以上就是小編實現的縱向下拉菜單的全部過程，既然可以實現縱向下拉菜單，那么橫向下拉菜單又該如何實現呢，更縱向菜單的實現過程有哪些不一樣的地方nie，這個過程才是我們成長的過程，在這里橫向菜單小編就不一一介紹了，完整實例代碼點擊此處本站下載。有需要的小伙伴可以down下來，自己研究。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery操作json數據技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
