制作jquery遮罩層效果導(dǎo)航菜單代碼分享

更新時間：2013年12月25日 09:32:52 作者：

我們將創(chuàng)建一個簡單的jquery菜單，只要我們懸停在導(dǎo)航欄的區(qū)域里，將展示給我們的畫面是：明亮的菜單在稍顯黑暗的背景圖中脫穎而出

jquery導(dǎo)航是一個網(wǎng)站必不可少的模塊，當(dāng)一個用戶在一個網(wǎng)站上瀏覽的時候，為了某個目的而查看網(wǎng)站導(dǎo)航欄的時候，突出導(dǎo)航欄的效果是重中之重。因此必須要使用一個效果：jquery遮罩層。利用明暗效果來突出當(dāng)前用戶的操作。

復(fù)制代碼代碼如下:

$(function() {
var $oe_menu= $('#oe_menu');
var $oe_menu_items= $oe_menu.children
('li');
var $oe_overlay= $('#oe_overlay');
                $oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-
index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not
('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children
('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 
0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 
0);
$oe_menu_items.children('div').hide();
})
});

您可能感興趣的文章:

相關(guān)文章

網(wǎng)頁下載文件期間如何防止用戶對網(wǎng)頁進(jìn)行其他操作
網(wǎng)頁下載文件時需要一段時間，在這期間如何防止用戶對網(wǎng)頁進(jìn)行其他操作，將div覆蓋在網(wǎng)頁上，將網(wǎng)頁鎖住，具體實現(xiàn)如下
2014-06-06
jquery ajax加載數(shù)據(jù)前臺渲染方式不用for遍歷的方法
今天小編就為大家分享一篇jquery ajax加載數(shù)據(jù)前臺渲染方式不用for遍歷的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
jQuery 學(xué)習(xí)第七課擴(kuò)展jQuery的功能插件開發(fā)
在介紹如何擴(kuò)展jQuery之前，先大致看下jQuery源碼（以1.3.2版本為例）。
2010-05-05
jQuery經(jīng)過一段時間自動隱藏指定元素的方法
這篇文章主要介紹了jQuery經(jīng)過一段時間自動隱藏指定元素的方法,實例分析了兩種比較常用的技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
jquery 插件之仿“卓越亞馬遜”首頁彈出菜單效果
用jquery實現(xiàn)的彈出菜單插件
2008-12-12
jquery miniui 教程表格控件合并單元格應(yīng)用
本文將詳細(xì)介紹jquery miniui 教程表格控件合并單元格的應(yīng)用，需要的朋友可以參考下
2012-11-11
jQuery中:animated選擇器用法實例
這篇文章主要介紹了jQuery中:animated選擇器用法,實例分析了:animated選擇器的功能、定義及匹配動畫效果元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery地圖map懸停顯示省市代碼分享
這篇文章主要分享jQuery實現(xiàn)地圖map懸停顯示省市代碼,需要的朋友可以參考下
2015-08-08
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)...
2007-06-06
深入學(xué)習(xí)jQuery Validate表單驗證（二）
這篇文章主要針對jQuery Validate表單驗證為大家進(jìn)行詳細(xì)介紹，通過name屬性來關(guān)聯(lián)字段來驗證，改變默認(rèn)的提示信息，將校驗規(guī)則寫到j(luò)s代碼中，感興趣的小伙伴們可以參考一下
2016-01-01