JQuery實現(xiàn)鼠標滑過顯示導航下拉列表

更新時間：2013年09月12日 16:32:59 投稿：whsnow

我們往往是將同一級目錄下的欄目先隱藏起來，當用戶的鼠標滑過時則顯示出來。這就是用javascript實現(xiàn)的一個導航欄下拉列表，下面為大家講解下是如何實現(xiàn)的

當網站導航欄項目很多的時候，我們往往是將同一級目錄下的欄目先隱藏起來。當用戶的鼠標滑過時則顯示出來。這就是用javascript實現(xiàn)的一個導航欄下拉列表。小編一步步給大家講解。值得注意的是我們使用的是Javascript的一個框架Jquery來實現(xiàn)的。所以，你在使用的時候必須要下載Jquery。

先建立HTML代碼

復制代碼代碼如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Jquery test web page</title>
<link rel="stylesheet" href="./css/layout.css" type="text/css" />
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/basic.js" type="text/javascript"></script>
</head>
<body>
<p id="it">IT業(yè)界</p>
<ul id="ul">
<li>百度</li>
<li>谷歌</li>
<li>網易</li>
<li>騰訊</li>
<li>淘寶</li>
</ul>
</body>
</html>

這條代碼是包含Jquery庫：

復制代碼代碼如下:

這里我們將CSS和JS文件單獨放在一個外部文件中。
layout.css文件的代碼為：

復制代碼代碼如下:

@CHARSET "GBK";
body{
font:12px Arial,Verdana;
}
ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#it{
margin:0px;
width:80px;
height:25px;
color:white;
text-align:center;
line-height:25px;
cursor:pointer;
background:black;
border:1px solid white;
}
#ul li{
width:80px;
height:25px;
color:white;
text-align:center;
line-height:25px;
cursor:pointer;
background:black;
border:1px solid white;
}
.highLight{
width:80px;
height:25px;
background:white;
border:1px solid blue;
color:black;
}

CSS代碼大家可以根據自己喜歡的樣式來設計，這里豆芽重要來解釋JS文件。

復制代碼代碼如下:

$(document).ready(function (){
$('#ul').hide(); //打開頁面隱藏下拉列表
$('#it').hover( //鼠標滑過導航欄目時
function(){
$('#ul').show(); //顯示下拉列表
$(this).css({'color':'red','background-color':'orange'}); //設置導航欄目樣式，醒目
},
function(){
$('#ul').hide(); //鼠標移開后隱藏下拉列表
}
);
$('#ul').hover( //鼠標滑過下拉列表自身也要顯示，防止無法點擊下拉列表
function(){
$('#ul').show();
},
function(){
$('#ul').hide();
$('#it').css({'color':'white','background-color':'black'}); //鼠標移開下拉列表后，導航欄目的樣式也清除
}
);
$('li').hover( //鼠標滑過下拉列表是改變當前欄目樣式
function(){
$(this).css({'color':'red','background-color':'orange'});
},
function(){
$(this).css({'color':'white','background-color':'black'});
}
);
});