JQuery實現鼠標滑過顯示導航下拉列表

2019-11-20 22:18:26

字體：大中小

來源：轉載

供稿：網友

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