用 CSS 製作無限階層的下拉選單

下拉選單樣式成果:

用 CSS 語法 寫出一個下拉無限層數的選單

支援瀏覽器:IE7 以上,其他主流瀏覽器(Chrome, Firefox, Safari, Opera…)。

製作選單是在網頁設計中相當需要,而我們常常會讓選單顯示得簡單一點, 再讓分類項目顯示在下拉選單中,本篇文章內容是用 CSS 加上 Jquery 寫出一個下拉無限層數的選單,而CSS 語法要會使用浮動(float)和位置(position)。成果就像下圖,有一層選單,然後滑鼠移過去之後會有下拉選單,再移過去又有再接下來的選單。 (css語法參考及教學w3school 在线教程)

1

html語法

首先,我們先把 HTML 的部分寫好:簡單來說,就是 ul 裡面好幾的 li(如圖一)、如果有下拉選單,在li內再加一個 ul 裡面再放 li(如圖二~圖四)。

(圖一)只有第一層選單時:

(圖二)在選單內容1,加入第二層選單:

(圖三)在選單內容1-2,加入第三層選單:

(圖四)在選單內容1-2-2,加入第四層選單:

此時,在未加入css語法時,網頁呈現的樣式:

(圖五)最後,在選單內容4,加入第一層選單4-1、4-2後:

備註說明:上面的語法中,有加入"img src="images/ul-li-html-step2.png"/",這是在選單前插入小圖示的語法

在加入css語法前,網頁呈現的樣式:

CSS語法-step 1

第一個選擇器 ul.navigation li 下的語法,有 float:left 是為了要讓選單是一個接著一個橫向拓展,position: relative 的用意是因為接下來要有下拉選單,讓定位點有參考。

第二個選擇器ul.navigation li a,就是統一設定選單內連結的樣式,我們把 a 設為 block 才能讓除了字以外在範圍內都可以有連結的效果。

第三個選擇器,則是針對第一層選單的樣式做設定,因為是橫向拓展,我們就加個邊框。

第四個選擇器,針對第一層選單 a:hover 時做顏色變化。

下圖為,在加入css語法後,網頁呈現的基本樣式。

CSS語法-step 2

CSS語法-step 3

javascript語法:當有下拉選單時,會出現指示箭頭

css語法:美化下拉選單時出現的指示箭頭的css語法

完成了!回到最上面,最體驗一下選單樣式的成果!.......go top