一、開篇

在研究CS08的時候，看到后臺管理的Dashboard滑動按鈕做得很漂亮，于是自己就動手寫了一個，在這里與大家分享。菜單展開可以是鼠標點擊按鈕，也可以是鼠標移動到按鈕上，在這里先介紹鼠標點擊的這種菜單。

二、原理

基本原理很簡單，就是將需要滑動的菜單放在一個overflow為hidden的容器里，然后控制菜單相對于容器的top屬性，實現(xiàn)下拉的效果。

但是實際上也沒這么簡單，因為要遇到很多問題，比如容器的大小如何控制、容器如何確定位置、容器應該何時出現(xiàn)（如果容器一直存在，則會擋住容器下面的元素）。這些問題是怎么解決的，在下一部分的代碼里會有注釋說明。在這里說明一下大概的原理：

1、首先在頁面載入時，要給菜單加上一個外框，就是上圖中的menuContainer，這個框的作用就是遮擋menu。頁面載入后，讓menu的visibility為hidden，這時用戶看不到菜單，但是我們可以獲得menu的長和寬，將這個值賦給menuContainer的長和寬（此時menuContainer的display為block，要不然根本就沒法賦值），然后將menuContainer的display設置為none。

?

2、當鼠標點擊按鈕時，根據(jù)按鈕的位置來確定下拉菜單的位置，將menuContainer的display設置為block后，就可以控制menu的top屬性（menu的position為absolute）實現(xiàn)滑動。

?

3、在滑動的過程當中，不能有按鈕的事件或者document關于菜單的事件被注冊，這樣會影響滑動的過程。所以滑動之前刪除注冊，滑動結束過后重新注冊事件。

?

4、當菜單展開的時候，點擊按鈕時菜單會收回，這里巧妙的用到了事件的冒泡。菜單展開的時候，根據(jù)if(isOpened)return;這一句來看，就像點擊按鈕不起作用一樣，點擊按鈕的事件會冒泡到document，而此時document恰好注冊有關閉菜單的方法，從而實現(xiàn)了再次點擊按鈕關閉菜單的目的。

三、代碼

注意：這里用到了關于事件的一個簡單框架和幾個其他函數(shù)，具體的可以下載示例后看源文件。 也可以看我之前寫的博客文章進行了解。

SlideMenu

function?SlideMenu(oBtn,oMenu){
????var?btn?=?oBtn;
????var?menu?=?oMenu;
????var?isOpened?=?false;
????//為下拉菜單添加外框
????var?menuContainer?=?document.createElement("div");
????menu?=?menu.parentNode.removeChild(menu);
????menuContainer.appendChild(menu);
????document.body.appendChild(menuContainer);
????
????//設置外框必要的樣式
????menuContainer.style.display?=?'block';
????menuContainer.style.visibility?=?'visible';
????menuContainer.style.overflow?=?'hidden';
????menuContainer.style.position?=?'absolute';
????
????//?設置下拉菜單的樣式
????menu.style.position?=?'absolute';
????menu.style.overflow?=?'visible';
????menu.style.display?=?'block';
????menu.style.visibility?=?'hidden';//?用戶既看不到下拉菜單?又可以獲取菜單的寬和高
????//?獲得下拉菜單的寬和高
????var?menuWidth?=?menu.offsetWidth;
????var?menuHeight?=?menu.offsetHeight;
????
????//設置下拉菜單容器的寬和高
????menuContainer.style.width?=?menuWidth;
????menuContainer.style.height?=?menuHeight;
????
????//?將下拉菜單容器隱藏
????menuContainer.style.display?=?'none';
????
????var?btnClick?=?function(){
????????//?如果已經(jīng)是展開的話?就不做響應
????????//?而是通過事件冒泡轉(zhuǎn)交給document的click處理
????????//?這是會關閉菜單
????????if(isOpened)
????????????return;
????????//?如果正在展開的過程中?又點擊了按鈕的話?就會響應很多次
????????//?這樣就可以限制在展開的過程當中多次點擊按鈕
????????btn.onclick?=?null;
????????//?將下拉容器設置為可見?此時下拉菜單為display:block;visibility:hidden;
????????menuContainer.style.display?=?'block';
????????
????????//?設置下拉容器的位置
????????var?pos?=?GetPosition(btn);
????????menuContainer.style.left?=?pos.x?+?'px';
????????menuContainer.style.top?=?(pos.y?+?btn.offsetHeight)?+?'px';
????????
????????//?設置下拉菜單的屬性
????????menu.style.left?=?'0px';
????????menu.style.top?=?-menuHeight?+?'px';
????????menu.style.visibility?=?'visible';
????????
????????BufferMove('document.getElementById("'?+?menu.id?+?'").style.top',-menuHeight,0,30,1,fnCallback);
????????function?fnCallback(){
????????????oEventUtil.addEventHandler(document,"click",docClick);
????????????btn.onclick?=?btnClick;
????????????isOpened?=?true;
????????}
????}
????btn.onclick?=?btnClick;
????var?docClick?=?function(){
????????oEvent??=?oEventUtil.getEvent();
????????//防止右鍵點擊
????????if(oEvent.button?==?2)
????????????return;
????????oEventUtil.removeEventHandler(document,"click",docClick);
????????BufferMove('document.getElementById("'?+?menu.id?+?'").style.top',0,-menuHeight,30,1,fnCallback);
????????function?fnCallback(){
????????????menuContainer.style.display?=?'none';
????????????isOpened?=?false;
????????}
????}
}

????? 這是菜單類的主要代碼，下面是使用方法

window.onload?=?function(){
????new?SlideMenu($("btn1"),$("menu1"));
}

????? 即在實例化時傳入兩個對象到構造函數(shù)，前一個參數(shù)是菜單按鈕對象，后一個參數(shù)是需要展開的菜單的對象。

四、下載

????? 點此下載示例

轉(zhuǎn)載于:https://www.cnblogs.com/LongWay/archive/2008/09/04/1283488.html

總結

以上是生活随笔為你收集整理的Javascript滑动菜单（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。