JQuery實(shí)現(xiàn)鼠標(biāo)滑過顯示導(dǎo)航下拉列表
當(dāng)網(wǎng)站導(dǎo)航欄項(xiàng)目很多的時(shí)候,我們往往是將同一級(jí)目錄下的欄目先隱藏起來(lái)。當(dāng)用戶的鼠標(biāo)滑過時(shí)則顯示出來(lái)。這就是用javascript實(shí)現(xiàn)的一個(gè)導(dǎo)航欄下拉列表。小編一步步給大家講解。值得注意的是我們使用的是Javascript的一個(gè)框架Jquery來(lái)實(shí)現(xiàn)的。所以,你在使用的時(shí)候必須要下載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>網(wǎng)易</li>
<li>騰訊</li>
<li>淘寶</li>
</ul>
</body>
</html>
這條代碼是包含Jquery庫(kù):
<script src="./js/jquery.js" type="text/javascript"></script>
這里我們將CSS和JS文件單獨(dú)放在一個(gè)外部文件中。
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代碼大家可以根據(jù)自己喜歡的樣式來(lái)設(shè)計(jì),這里豆芽重要來(lái)解釋JS文件。
$(document).ready(function (){
$('#ul').hide(); //打開頁(yè)面隱藏下拉列表
$('#it').hover( //鼠標(biāo)滑過導(dǎo)航欄目時(shí)
function(){
$('#ul').show(); //顯示下拉列表
$(this).css({'color':'red','background-color':'orange'}); //設(shè)置導(dǎo)航欄目樣式,醒目
},
function(){
$('#ul').hide(); //鼠標(biāo)移開后隱藏下拉列表
}
);
$('#ul').hover( //鼠標(biāo)滑過下拉列表自身也要顯示,防止無(wú)法點(diǎn)擊下拉列表
function(){
$('#ul').show();
},
function(){
$('#ul').hide();
$('#it').css({'color':'white','background-color':'black'}); //鼠標(biāo)移開下拉列表后,導(dǎo)航欄目的樣式也清除
}
);
$('li').hover( //鼠標(biāo)滑過下拉列表是改變當(dāng)前欄目樣式
function(){
$(this).css({'color':'red','background-color':'orange'});
},
function(){
$(this).css({'color':'white','background-color':'black'});
}
);
});
因?yàn)槟壳熬W(wǎng)站編輯器的問題還無(wú)法上傳圖片,沒有圖片大家自己先到本地測(cè)試看看效果吧。
相關(guān)文章
jQuery刪除當(dāng)前節(jié)點(diǎn)元素
本文給大家分享一段代碼給大家介紹jquery刪除當(dāng)前節(jié)點(diǎn)元素的方法,代碼簡(jiǎn)單易懂,非常不錯(cuò),需要的朋友參考下吧2016-12-12jQuery實(shí)現(xiàn)聯(lián)動(dòng)下拉列表查詢框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)聯(lián)動(dòng)下拉列表查詢框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01淺談jQuery中Ajax事件beforesend及各參數(shù)含義
下面小編就為大家?guī)?lái)一篇淺談jQuery中Ajax事件beforesend及各參數(shù)含義。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧,祝大家游戲愉快哦2016-12-12Json實(shí)現(xiàn)異步請(qǐng)求提交評(píng)論無(wú)需跳轉(zhuǎn)其他頁(yè)面
Json實(shí)現(xiàn)異步請(qǐng)求,效果即為,在輸入框中輸入相關(guān)文字,點(diǎn)擊提交,下方會(huì)自動(dòng)將書寫的文字進(jìn)行展示,無(wú)需跳轉(zhuǎn)其他頁(yè)面2014-10-10jquery 獲取select數(shù)組與name數(shù)組長(zhǎng)度的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery 獲取select數(shù)組與name數(shù)組長(zhǎng)度的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06