在我們進行前端頁面編寫時，有一些方便使用者進行操作的分欄連結、導航和錨點功能需要進行展示，但又不是主要的導航區，我們會用一種在側面收拉的功能欄進行編寫。這樣既美觀又可以讓頁面更生動。那麼我們現在就一起來實現它。
一、邏輯分析
首先我們要分析這個功能的實現方法。我們需要用到css3的定位、過渡和變形，配合JQ使用滑鼠事件進行觸發動效。
1。需求：
1）整體功能區需要固定在瀏覽器右側並不受捲軸影響。
2）需要露出功能區的序號部分。
3）滑鼠移入時，功能區會進行展開，並依次延遲執行。
4）滑鼠移出時，功能區會進行收起，並依次延遲執行。
5）在變形的過程中，還需進行樣式的編寫。
2。知識點：
1）Css中的變形、過渡
2）JQ的hover事件、迴圈、篩選、操作樣式、操作屬性
二、程式碼編寫
1。建立空白頁，並引入線上JQ庫
2。編寫HTML結構，由於是側邊欄，我們需要用HTML5的語義標籤進行編寫
3。編寫Css樣式。我們需要將整體功能區域用固定定位的方式寫在瀏覽器最右側，並露出功能提示區。
4。進行JQ編寫。
三、結語
其實動態效果並沒有我們想象的那麼複雜，再複雜的動效分析到最後也是找到需要操作的物件，操作它的樣式、內容和屬性。我們只需要展開想象，梳理好邏輯進行編寫。在除錯過後就可以寫出漂亮的動態效果了。
