側邊欄信息展示效果

課程簡介

學會實現側邊欄內容效果展示，能夠讓你迅速進階。三個步驟:通過HTML、CSS實現側邊欄內容布局；實現JavaScript代碼效果，使用面向對象的方式；在JavaScript代碼預留位置，添加動畫效果。學會這些，躋身大網站程式設計師行列，身價倍增，趕快學習！

第1章效果展示及實現步驟分析

明確側邊欄信息展示效果的運用位置，剖析實現這個效果的六大方面功能及實施步驟。

1-1效果展示及實現步驟分析(04:36)

第2章用HTML+CSS實現側邊欄頁面布局

本部分包括兩個內容實現，首先實現的是側邊欄（Sidebar）選單的布局，接下來實現的是選單欄內容項方面的布局。

2-1使用HTMLCSS實現側邊欄選單布局(09:54)

2-2練習題

2-3用HTMLCSS實現選單欄內容項布局(06:37)

2-4練習題

第3章使用JavaScript的構造函式創建對象

本部分是課程中的難點部分，首先創建的是側邊欄對象，並對其進行驗證，接著創建選單欄內容項的對象。

3-1用Js的構造函式創建側邊欄對象(12:31)

3-2練習題

3-3側邊欄對象--構造函式的驗證(07:34)

3-4使用JS的構造函式創建選單項對象(09:32)

3-5練習題

第4章側邊欄信息展示效果的動畫效果的添加

動畫實現包括打開和關閉側邊欄以及打開及關閉選單內容欄選單項兩個大的模組，動畫實現原理相同。

4-1動畫效果相關知識點講解(06:45)

4-2關閉側邊欄的動畫效果實現(09:16)

4-3打開側邊欄的動畫效果實現(06:47)

4-4選單欄內容項的動畫效果實現(16:02)

4-5練習題

第5章總結

對內容進行梳理，在案例實現過程中用到的技術點及技巧進行總結。

5-1總結(03:53)