製作風琴導航
（註明：本文獻的一切圖來自潘老師的）
下面我們看一下老師的**，風琴導航，用a標籤包括em標籤，用a標籤能更方便更有可以跳轉的效果，當然要實現頁面跳轉要加幾個頁面還有在a標籤裡面加「#」這個符號，同樣可以加乙個**在裡面來進行頁面跳轉。
接著我們來看老師的css部分，首先把風琴固定在右邊；因為a 標籤是塊級元素還有a標籤自帶小圓點要把它去掉text-decoration: none;，所以em標籤被包裹在裡面要把它變成行內的塊級元素，給它寬高、字型大小、字型顏色、文字居中等。
transition: all 0.2s ease;選擇到所有的動畫，然後在0.2秒之後執行這句**
這兩句是風琴導航的最重要的語句
如圖是風琴導航的執行指令，這裡面我們可以看得到有很多這句「transition-delay」，它的屬性是規定過渡效果何時開始，值以秒或毫秒計的。重點是這句「transform: translatex(0px);」都是圍繞著這句來執行的。從快到慢的過渡顯示
效果圖：
滑鼠移入它就會以快到慢依次展開，移出它就會收起，只顯示最外面那個字
jQuery手風琴製作
接下來我們就開始製作了，首先，我們要做的就是排版，如下 工作 汽車房子 美女然後就是寫css樣式 最後，就該我們的重點了，jquery 注釋 nextall 查詢當前元素之後所有的同輩元素。slidedown 通過高度變化 向下增大 來動態地顯示所有匹配的元素。end 將匹配的元素列表變為前一次的狀...
jQuery手風琴製作
在製作手風琴中主要用到jquery中的幾個方法 1.siblings 主要用來搜尋同輩的元素，不包括自己。div 效果如下 2.slidedown speed,fn 向上滑動，slideup speed,fn 向下滑動，滑動效果 speed設定滑動效果的時長，可以是 show normal fast...
導航製作總結
1.導航條可用標籤實現，可以方便搜尋引擎解析頁面結構 3.導航條內的元素定位可利用margin padding實現，如 1 設定 父元素 的padding 2 設定子元素的margin 4.實現左右水平布局，可以讓內聯元素右浮動即可 5.對於較重要的字眼可用標籤修飾，如數字 購物車中商品件數 等 6...