記錄【CSS LAYOUT】書藉練習
製作下拉式選單 Drop-Down Menu
1.先製作基本導覽列
3.建立巢狀 list 製作下拉式選單
在導覽列的li 元素中加入新的ul 元素，讓它成為巢狀結構。
以此類堆，將導覽列的5個項目都建立新的 ul元素和 li元素(只需更動HTML 語法)。
到這邊為止下拉式選單會是像這樣 ↓
在滑鼠移到下拉式選單的子選單時會呈現 ↓
4.設定子選單樣式
到上一個步驟為止
滑鼠移到導覽列或移到導覽列的子選單所呈現的都是依樣效果。
這個步驟我們要將導覽列的子選單設定樣式，
讓滑鼠滑過導覽列與導覽列的子選單效果做出區。
首先，將導覽列子選單底色設為灰色，而在滑鼠滑過時底色變橘色且字行改小。
這邊只需要更動CSS語法
---------------------------------------CSS---------------------------------------
呈現樣式 ↓
5.加入Javascrip讓下拉式選單成形
最後，在子選單上加入往下展開的效果，
讓平時不會顯示，只有滑鼠滑入導覽列時子選單才會跳來。
在導覽列中的li 元素中指定class名為「parentOn」
然後在onmouseover屬性和onmouseout屬性中加入Javascrip的敘述
讓滑鼠滑入li元素時切換class名
---------------------------------------HTML---------------------------------------
---------------------------------------CSS---------------------------------------
呼！這邊文章是長了一點，我總算把它生出來了。
不過，實際操作出來的成品會很有成就感喔！
用清單元素製作導覽列
以a元素編寫要做為項目的文字，並利用li元素將它們分別為起來。
在使用無序清單ul元素將所有li元素包起來，接著以名為#navigation的div元素將它們框住，這邊先將a元素的href屬性直指定為 #。
---------------------------------------HTML---------------------------------------
---------------------------------------CSS---------------------------------------
呈現樣式 ↓
2.接下來指定導覽列項目依水平排列
這裡使用float屬性的文繞圖機制，讓導覽列個項目依水平方向排列。
此階段HTML不動，只需更動CSS 語法，並將導覽列加入滑鼠滑過的特效。
這邊使用的滑鼠滑過特效是使用position方法，
---------------------------------------CSS---------------------------------------
到這邊為止下拉式選單會呈現這樣 ↓
在導覽列的li 元素中加入新的ul 元素，讓它成為巢狀結構。
以此類堆，將導覽列的5個項目都建立新的 ul元素和 li元素(只需更動HTML 語法)。
---------------------------------------HTML---------------------------------------
到這邊為止下拉式選單會是像這樣 ↓
在滑鼠移到下拉式選單的子選單時會呈現 ↓
4.設定子選單樣式
到上一個步驟為止
滑鼠移到導覽列或移到導覽列的子選單所呈現的都是依樣效果。
這個步驟我們要將導覽列的子選單設定樣式，
讓滑鼠滑過導覽列與導覽列的子選單效果做出區。
首先，將導覽列子選單底色設為灰色，而在滑鼠滑過時底色變橘色且字行改小。
這邊只需要更動CSS語法
---------------------------------------CSS---------------------------------------
5.加入Javascrip讓下拉式選單成形
最後，在子選單上加入往下展開的效果，
讓平時不會顯示，只有滑鼠滑入導覽列時子選單才會跳來。
在導覽列中的li 元素中指定class名為「parentOn」
然後在onmouseover屬性和onmouseout屬性中加入Javascrip的敘述
讓滑鼠滑入li元素時切換class名
---------------------------------------HTML---------------------------------------
---------------------------------------CSS---------------------------------------
成果完成 ↓
呼！這邊文章是長了一點，我總算把它生出來了。
不過，實際操作出來的成品會很有成就感喔！
Posts
