使用jquery 簡(jiǎn)單實(shí)現(xiàn)下拉菜單
Jquery 是一個(gè)輕量的框架,個(gè)人認(rèn)為非常好用,今天就寫(xiě)一個(gè)非常簡(jiǎn)單的例子,實(shí)現(xiàn)下拉菜單功能;
首先肯定要在頁(yè)面引用jquery.js 版本不限 ;
接下來(lái)把=====================html貼出來(lái):
<div class=”header_menu”>
<ul>
<li class=”menuli” id=”xtgl_menu”>系統(tǒng)管理</li>
<li class=”menuli” id=”ggsq_menu”>干管所勤</li>
<li class=”menuli” id=”bhz_menu”>保護(hù)站</li>
<li class=”menuli” id=”mcjy_menu”>木材檢驗(yàn)</li>
<li class=”menuli” id=”slgh_menu”>森林管護(hù)</li>
</ul>
</div>
<div class=”display movediv” id=”slgh_menu_div”>
<ul>
<li class=”redli”>出勤管理</li>
<li class=”redli”>巡視管理</li>
<li class=”redli”>現(xiàn)場(chǎng)取證</li>
<li class=”redli”>問(wèn)題處置</li>
</ul>
</div>
<div class=”display movediv” id=”mcjy_menu_div”>
<ul>
<li class=”redli”>位置監(jiān)測(cè)</li>
<li class=”redli”>檢驗(yàn)管理</li>
</ul>
</div>
<div class=”display movediv” id=”bhz_menu_div”>
<ul>
<li class=”redli”>出勤管理</li>
<li class=”redli”>監(jiān)管信息</li>
</ul>
</div>
<div class=”display movediv” id=”ggsq_menu_div”>
<ul>
<li class=”redli”>出勤管理</li>
<li class=”redli”>監(jiān)管信息</li>
</ul>
</div>
<div class=”display movediv” id=”xtgl_menu_div”>
<ul>
<li class=”redli”>權(quán)限管理</li>
<li class=”redli”>設(shè)備管理</li>
</ul>
</div>
===========================css樣式:
/**頭部菜單**/
.header_menu{
float:right;
width: 50%;
height: 100%;
cursor: pointer;
}
.header_menu ul{
list-style: none;
height: 100%;
}
.header_menu ul li{
float: right;
width: 20%;
color:white;
font-size:14px;
padding-top: 55px;
font-weight: bold;
}
.display{
display: none;
}
.display ul{
list-style: none;
width: 100px;
}
.display ul li{
padding-top:10px;
padding-bottom: 5px;
padding-left:5px;
cursor: pointer;
font-size: 14px;
}
.movediv{
position: fixed;
left: 0px;
top:0px;
font-size: 14px;
white;
border:1px solid white;
}
.redcolor{
#a0c9e6;
}
=======================js腳本
$(function() {
// 菜單綁定事件
initMenuListener();
// 下拉菜單綁定事件
initSubMenuHover();
// 下拉菜單顏色改變
initSubMenuLiHover();
});
/**
* 頭部菜單綁定滑過(guò)事件
*/
function initMenuListener() {
$(“.menuli”).hover(function() {
var hideDivId = $(this).attr(“id”) + “_div”;
// 得到菜單的位置
var left = $(this).offset().left;
var top = $(this).offset().top;
var height = $(this).outerHeight();//outerHeight是獲取高度,包括內(nèi)邊距,height是也是獲取高度,不過(guò)只包括文本高度
$(“#” + hideDivId).show();
$(“#” + hideDivId).css(“l(fā)eft”, left);
$(“#” + hideDivId).css(“top”, top + height);
}, function() {
// 將原來(lái)的菜單隱藏
$(“.display”).hide();
});
}
/**
* 下拉菜單綁定事件
*/
function initSubMenuHover() {
$(“.display”).hover(function() {
$(this).show();
}, function() {
$(this).hide();
});
}
/**
* 下拉菜單改變顏色
*/
function initSubMenuLiHover() {
$(“.redli”).hover(function() {
$(this).addClass(“redcolor”);
}, function() {
$(this).removeClass(“redcolor”);
});
}
效果如下:
小伙伴們使用的時(shí)候自己美化下,自由擴(kuò)展下就可以用到自己的項(xiàng)目中了,我這里僅僅是簡(jiǎn)單做了點(diǎn)樣式而已。
- jQuery實(shí)現(xiàn)的多級(jí)下拉菜單效果代碼
- jquery帶下拉菜單和焦點(diǎn)圖代碼分享
- jquery實(shí)現(xiàn)適用于門(mén)戶站的導(dǎo)航下拉菜單效果代碼
- jquery+css實(shí)現(xiàn)絢麗的橫向二級(jí)下拉菜單-附源碼下載
- jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果
- jQuery實(shí)現(xiàn)向下滑出的平滑下拉菜單效果
- jQuery實(shí)現(xiàn)簡(jiǎn)單二級(jí)下拉菜單
- jQuery實(shí)現(xiàn)精美的多級(jí)下拉菜單特效
- JQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示導(dǎo)航下拉列表
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)遮罩并高亮顯示效果
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
相關(guān)文章
jQuery UI的Dialog無(wú)法提交問(wèn)題的解決方法
最近在使用jQuery UI的Dialog控件時(shí)發(fā)現(xiàn)如果在此控件放置表單,則所有表單均無(wú)法正常提交2011-01-01基于Jquery的仿Windows Aero彈出窗(漂亮的關(guān)閉按鈕)
目前市面上已經(jīng)有很多成熟好用的jquery彈出窗插件,像模態(tài)窗口插件(Modal Dialog Plugins)以及數(shù)不勝數(shù)的燈箱插件(lightbox plugins)。2010-09-09jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能,需要的朋友可以參考下2015-11-11jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框?qū)崙?zhàn)(5)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02