1. 程式人生 > >jQuery彈出側邊欄滑動選單實現思路

jQuery彈出側邊欄滑動選單實現思路

昨天下午下了一個用jQuery實現彈出側邊欄滑動選單的demo,其實看明白了很簡單,現在把思路整理一下。

js部分:主要用了jQuery的toggleClass()方法,該方法檢查每個元素中指定的類。如果不存在則新增類,如果已設定則刪除之。

html部分:主要有三個部分:主頁、側滑選單頁、點選按鈕(a標籤)。

css部分:
    主頁設定相對佈局(relative),在這裡看到一個單位vh,查了一下是視窗高度,1vh等於視窗高度的1%。同理vw是視窗寬度,1vw等於視窗寬度的1%。設定層級為2.最後還有一個過渡transition: transform 0.7s;就是設定滑動時間,注意:這裡並沒有設定transform,而是在js呼叫toggleClass()切換類以後再設定:transform: translateX(80%);80%表示隱藏主頁的80%。  


    側滑選單頁很簡單,主要就設定了一個層級1,位於主頁之下。
    點選按鈕(a標籤)就設定了一個fixed定位,層級大於等於2。