每日分享- js 結(jié)合 HTML DOM 如何實現(xiàn)聯(lián)動菜單

動菜單通常是指一個下拉框的選項值發(fā)生改變后，另一個下拉框的選項值會發(fā)生對應(yīng)的變化。在 HTML 頁面中，可以使用 JavaScript 結(jié)合 HTML DOM 來實現(xiàn)這一功能。下面我來舉一個例子。

假設(shè)我們有三個下拉框，分別是“省份”、“城市”和“區(qū)縣”。當(dāng)“省份”下拉框的選項值發(fā)生改變時，我們需要動態(tài)更新“城市”下拉框的選項值，并且根據(jù)“城市”的選項值動態(tài)更新“區(qū)縣”下拉框的選項值。具體實現(xiàn)步驟如下：

1 首先在 HTML 文件中定義三個下拉框，并分別給它們一個唯一的 ID，如下所示：

 <label>省份：</label>
<select id="province"></select>

<label>城市：</label>
<select id="city"></select>

<label>區(qū)縣：</label>
<select id="district"></select>

2 在 JavaScript 中定義三個函數(shù)，分別用于更新“城市”、“區(qū)縣”下拉框的選項值，以及初始化頁面時的默認值：

 // 更新城市下拉框內(nèi)容
function updateCity() {
  var provinceSelect = document.getElementById("province");
  var citySelect = document.getElementById("city");
  citySelect.innerHTML = ""; // 清空城市下拉框內(nèi)容

  // 根據(jù)選中的省份，獲取該省份對應(yīng)的城市列表
  var provinceName = provinceSelect.value;
  var cityList = getCityList(provinceName);

  // 根據(jù)城市列表，動態(tài)生成城市下拉框的選項
  for (var i = 0; i < cityList.length; i++) {
    var option = document.createElement("option");
    option.text = cityList[i];
    citySelect.add(option);
  }

  // 觸發(fā)區(qū)縣下拉框更新
  updateDistrict();
}

// 更新區(qū)縣下拉框內(nèi)容
function updateDistrict() {
  var citySelect = document.getElementById("city");
  var districtSelect = document.getElementById("district");
  districtSelect.innerHTML = ""; // 清空區(qū)縣下拉框內(nèi)容

  // 根據(jù)選中的城市，獲取該城市對應(yīng)的區(qū)縣列表
  var cityName = citySelect.value;
  var districtList = getDistrictList(cityName);

  // 根據(jù)區(qū)縣列表，動態(tài)生成區(qū)縣下拉框的選項
  for (var i = 0; i < districtList.length; i++) {
    var option = document.createElement("option");
    option.text = districtList[i];
    districtSelect.add(option);
  }
}

// 初始化頁面
function initPage() {
  var provinceSelect = document.getElementById("province");
  var citySelect = document.getElementById("city");
  var districtSelect = document.getElementById("district");

  // 根據(jù)省份列表，動態(tài)生成省份下拉框的選項
  for (var i = 0; i < provinceList.length; i++) {
    var option = document.createElement("option");
    option.text = provinceList[i];
    provinceSelect.add(option);
  }

  // 觸發(fā)城市下拉框更新
  updateCity();
}

現(xiàn)在我們已經(jīng)完成了省份和城市兩個下拉框的聯(lián)動效果，接下來我們需要再次綁定城市下拉框的change事件，以實現(xiàn)城市與區(qū)縣下拉框的聯(lián)動。

首先，我們需要在HTML中添加第三個下拉框，用于選擇區(qū)縣：

<select id="county"></select>

然后，我們需要更新updateCity和initPage兩個函數(shù)，使其能夠更新城市和區(qū)縣兩個下拉框：

function updateCity() {
  var province = document.getElementById('province').value;
  var cityOptions = '';
  for (var i = 0; i < cities[province].length; i++) {
    cityOptions += '<option value="' + cities[province][i] + '">' + cities[province][i] + '</option>';
  }
  document.getElementById('city').innerHTML = cityOptions;

  // 清空區(qū)縣下拉框
  document.getElementById('county').innerHTML = '<option value="">--請選擇--</option>';
}

function updateCounty() {
  var province = document.getElementById('province').value;
  var city = document.getElementById('city').value;
  var countyOptions = '';
  for (var i = 0; i < counties[province][city].length; i++) {
    countyOptions += '<option value="' + counties[province][city][i] + '">' + counties[province][city][i] + '</option>';
  }
  document.getElementById('county').innerHTML = countyOptions;
}

function initPage() {
  // 初始化省份下拉框
  var provinceOptions = '<option value="">--請選擇--</option>';
  for (var province in cities) {
    provinceOptions += '<option value="' + province + '">' + province + '</option>';
  }
  document.getElementById('province').innerHTML = provinceOptions;

  // 綁定省份下拉框的change事件
  document.getElementById('province').addEventListener('change', updateCity);

  // 初始化城市下拉框
  updateCity();

  // 綁定城市下拉框的change事件
  document.getElementById('city').addEventListener('change', updateCounty);

  // 初始化區(qū)縣下拉框
  updateCounty();
}

在updateCity函數(shù)中，我們添加了清空區(qū)縣下拉框的代碼，以確保每次更改城市時，區(qū)縣下拉框都會被清空。

在updateCounty函數(shù)中，我們根據(jù)選擇的省份和城市，動態(tài)生成區(qū)縣下拉框的選項。

在initPage函數(shù)中，我們綁定了城市下拉框的change事件，并調(diào)用updateCounty函數(shù)初始化區(qū)縣下拉框的選項。

最后，我們需要在JavaScript代碼中定義counties變量，以存儲每個城市對應(yīng)的區(qū)縣信息：

var counties = {
  "北京市": {
    "市轄區(qū)": ["東城區(qū)", "西城區(qū)", "崇文區(qū)", "宣武區(qū)", "朝陽區(qū)", "豐臺區(qū)", "石景山區(qū)", "海淀區(qū)", "門頭溝區(qū)", "房山區(qū)", "通州區(qū)", "順義區(qū)", "昌平區(qū)", "大興區(qū)", "懷柔區(qū)", "平谷區(qū)"],
    "縣": ["密云縣", "延慶縣"]
  },
  "上海市": {
    "市轄區(qū)": ["黃浦區(qū)", "盧灣區(qū)", "徐匯區(qū)", "長寧區(qū)", "靜安區(qū)", "普陀區(qū)", "閘北區(qū)", "虹口區(qū)", "楊浦區(qū)", "閔行區(qū)", "寶山區(qū)", "嘉定區(qū)", "浦東新區(qū)", "金山區(qū)", "松江區(qū)", "青浦區(qū)", "南匯區(qū)", "奉賢區(qū)"],
    "縣": ["崇明縣"]
  },
  // 省略部分數(shù)據(jù)...
};

接下來是第三個函數(shù)setDefaultValue()，用于初始化頁面時設(shè)置默認值。在這個函數(shù)中，我們先根據(jù)省份的默認值設(shè)置省份下拉框的選中項，然后根據(jù)省份和城市的默認值，從數(shù)據(jù)中獲取相應(yīng)的區(qū)縣數(shù)據(jù)，并設(shè)置區(qū)縣下拉框的選項。

function setDefaultValue() {
  // 設(shè)置省份下拉框默認選中項
  var provinceSelect = document.getElementById("province");
  for (var i = 0; i < provinceSelect.options.length; i++) {
    if (provinceSelect.options[i].value === defaultProvince) {
      provinceSelect.selectedIndex = i;
      break;
    }
  }
  
  // 根據(jù)省份和城市設(shè)置區(qū)縣下拉框選項
  var citySelect = document.getElementById("city");
  var districtSelect = document.getElementById("district");
  var districtData = data[defaultProvince][defaultCity];
  districtSelect.options.length = 0; // 清空區(qū)縣下拉框
  for (var i = 0; i < districtData.length; i++) {
    var option = new Option(districtData[i], districtData[i]);
    if (districtData[i] === defaultDistrict) {
      option.selected = true; // 設(shè)置默認選中項
    }
    districtSelect.options.add(option);
  }
}

在這個函數(shù)中，我們首先獲取省份下拉框的DOM元素，并通過循環(huán)找到選中項為默認省份的選項，并設(shè)置為選中狀態(tài)。然后獲取城市和區(qū)縣的DOM元素，并從數(shù)據(jù)中獲取對應(yīng)的區(qū)縣數(shù)據(jù)。最后根據(jù)區(qū)縣數(shù)據(jù)動態(tài)創(chuàng)建選項，并設(shè)置默認選中項。注意，在設(shè)置區(qū)縣下拉框的選項時，我們先要將下拉框的長度設(shè)為0，以清空之前的選項。同時，我們還需要為新創(chuàng)建的選項設(shè)置selected屬性，以設(shè)置默認選中項。

以上就是一個簡單的基于JavaScript和HTML DOM實現(xiàn)聯(lián)動菜單的示例，可以根據(jù)具體的業(yè)務(wù)需求進行擴展和修改。

拉菜單可以說是UI設(shè)計中最普遍使用的設(shè)計元素之一了。它們因為能夠有效節(jié)省界面空間、操作簡單、體驗絕佳等優(yōu)點，而被廣泛應(yīng)用到網(wǎng)頁或App界面導(dǎo)航、搜索以及選擇模塊設(shè)計之中。本篇文章，摹客為大家整理了40個最新創(chuàng)意下拉菜單設(shè)計實例和技巧，以供廣大設(shè)計師欣賞、學(xué)習(xí)和借鑒。

30個最新優(yōu)質(zhì)下拉菜單設(shè)計實例，輕松帶給你設(shè)計靈感

1.Converse

Converse是一個在線售賣最新衣物、鞋子和旅行裝備的時尚網(wǎng)站。它的首頁選用了點擊可觸發(fā)的下拉菜單式導(dǎo)航設(shè)計。整個下拉菜單，最大的特色就是添加了非常豐富的鼠標(biāo)懸浮特效，以幫助用戶快速聚焦各個選項。兩欄的布局設(shè)計，直觀易讀，也方便用戶快速查看和選擇。

2.Santa Cruz

Santa Cruz 是一個網(wǎng)上的自行車商店。它的下拉菜單導(dǎo)航，利用大量“圖片+文字”的卡片設(shè)計，直接清晰地展示了網(wǎng)站的各類商品。如此，用戶通過導(dǎo)航菜單，就能提前對各個商品有所了解，并快速選擇。省略掉用戶需要逐一點開、查看詳情并最后才能做出選擇的復(fù)雜過程，非常實用。適合各類在線商店學(xué)習(xí)和借鑒。

3.Helias Oils

Helias Oils 是一個在線精油網(wǎng)站。它的首頁也選用了點擊可觸發(fā)的下拉菜單式導(dǎo)航。除了豐富的懸浮特效，設(shè)計師還添加了炫酷的波浪式轉(zhuǎn)場動效，吸引用戶停留的同時，也快速引導(dǎo)用戶做出選擇。

4.Whirling CSS3 Drop Down Menu

Whirling CSS3 Drop Down Menu 是一款視覺效果極佳的CSS導(dǎo)航下拉菜單模板設(shè)計。它最有趣的地方就是添加了十分新穎的扭轉(zhuǎn)展開式動效。適合各類暗黑風(fēng)網(wǎng)頁設(shè)計使用。感興趣的設(shè)計師，可以點擊“返回教程”查看制作詳情。

5.Lion Burger

Lion Burger 是一個使用按鈕式下拉菜單導(dǎo)航的網(wǎng)站。它最值得關(guān)注的就是下拉菜單所選用的配色。紅色選項搭配白色文案的設(shè)計，清晰展示菜單選項內(nèi)容的同時，也與主頁黑色背景形成鮮明對比，讓用戶不自覺的將關(guān)注點放在導(dǎo)航上。

6.CSS3 Slide Drop Down Box Menu

CSS3 Slide Drop Down Box Menu 是另一款精美的下拉菜單式導(dǎo)航設(shè)計。鼠標(biāo)指向主菜單選項時，相應(yīng)的模塊圖片和菜單列表也會隨即展示。菜單選項向左、向右自動滑出的動效設(shè)計，也極賦創(chuàng)意。感興趣的小伙伴，可以下載看看。

7.Responsive Drop Down Navigation Menu

Responsive drop down navigation menu 是一款為專為Bootstrap網(wǎng)頁模板而特制的下拉菜單導(dǎo)航。整個導(dǎo)航分為四欄，前三欄通過純文本設(shè)計，依次羅列了商品不同分類下的各個選項，而最后一欄則通過商品圖片輪播設(shè)計，引導(dǎo)用戶選擇，結(jié)構(gòu)分明，布局清晰，任何用戶都能快速熟悉并按需選擇。適合具有類似清晰產(chǎn)品分類的網(wǎng)頁或App借鑒。

8.Drop Down Menu Bryan

Drop Down Menu Bryan 是一款三級下拉菜單導(dǎo)航設(shè)計。用戶點擊左上角的導(dǎo)航按鈕，各級菜單就會隨即一步步展示，輕松引導(dǎo)用戶快速找到所需選項。適合具有復(fù)雜導(dǎo)航系統(tǒng)的網(wǎng)站借鑒和使用。

9.PopSockets

PopSockets 是一款色彩豐富的概念性下拉菜單導(dǎo)航設(shè)計。整個導(dǎo)航設(shè)計除了高效直觀的四欄布局，還添加了多彩的產(chǎn)品繪畫進行點綴，精美實用。

10.Minimal Drop Down Menu Exploration

Minimal Drop Down Menu Exploration 是一款典型的極簡風(fēng)下拉菜單導(dǎo)航設(shè)計。整個網(wǎng)頁的主菜單導(dǎo)航欄，直接簡化成了細小的色彩條。鼠標(biāo)懸浮，相關(guān)菜單選項才會隨即展開。鼠標(biāo)離開后，又立即收起。反應(yīng)靈敏，簡潔高效。各類極簡風(fēng)網(wǎng)頁不妨學(xué)習(xí)一下。

11.Creative Drop Down Menu with Icons

Creative Drop Down Menu with Icons 是一個結(jié)構(gòu)分明的下拉菜單導(dǎo)航。藍色背景搭配白色選項，美觀時尚。鏤空的圖標(biāo)點綴，也有力突出了每個選項，讓整個菜單結(jié)構(gòu)布局更加清晰。

12.Zenith Arena De Lille Drop Down Menu

Zenith Arena De Lille Drop Down Menu 是一個專為室內(nèi)競技場網(wǎng)站而打造的下拉菜單導(dǎo)航。不同于一般網(wǎng)頁通過添加蒙版或新窗口的方式，展示下拉菜單，該款設(shè)計直接將菜單融合在界面主頁上，點擊觸發(fā)，整個頁面也會隨之展開或隱藏，操作展示更便捷。對類似菜單展示方式感興趣的設(shè)計師，可以了解一下。

13.SkySmile Drop Down Menu

Sky Smile Drop Down Menu最值得學(xué)習(xí)的地方就是選用了漸變色菜單背景。這樣的設(shè)計，不僅成功突出了下拉菜單內(nèi)容，還輕松與網(wǎng)站的主體配色相呼應(yīng)，確保了網(wǎng)頁整體設(shè)計風(fēng)格的一致性。

14.Minimal Drop Down Menu Interaction

Minimal Drop Down Menu Interaction 是一款專為簡約風(fēng)懸浮導(dǎo)航按鈕而打造的下拉菜單設(shè)計。整個菜單和選項都由簡單的圖標(biāo)構(gòu)成，適用于各類簡約風(fēng)App設(shè)計。

15.Mobile App Drop Down Menu

Mobile App Drop Down Menu 是另一個簡約風(fēng)App可參考的導(dǎo)航按鈕設(shè)計。除了極簡的圖標(biāo)導(dǎo)航菜單，此款設(shè)計還添加了橫向滑出動效，更加生動地展示低一級的菜單選項，吸引用戶關(guān)注。

16.Notification Drop Down Box Design

Notification Drop Down Box Design 是一個消息提示類下拉菜單設(shè)計。用戶指向頂部的消息提示圖標(biāo)，菜單隨即展開，清晰呈現(xiàn)相關(guān)涉及人員、發(fā)送時間以及消息內(nèi)容等信息，實用性極強。

17.Notification Drop Down Menu

Notification Drop Down Menu 是另一款專為消息提示設(shè)計打造的下拉菜單。不同于上一個案例，布滿圖片和文字，此款設(shè)計外觀上更加簡約美觀。可愛的卡通貓繪畫，也無形中引導(dǎo)用戶快速聚焦于當(dāng)前的選中項，幫助他們快速做出選擇。

18.HTML Drop Down Menu Animation

HTML Drop Down Menu Animation 也是一個極簡的導(dǎo)航按鈕下拉菜單設(shè)計，提供免費的HTML、CSS以及JS源代碼資源。它最值得效仿的地方，就是為下拉菜單添加了逐一展開各個選項的動效設(shè)計，個性而獨特。

19.About Us Drop Down Menu Animation

About Us Drop Down Menu Animation 是一個專為網(wǎng)頁“關(guān)于我們”的導(dǎo)航模塊而設(shè)計的下拉菜單。整個設(shè)計最亮眼的地方就是添加了菜單彈出動效，靈動而富有活力。單個選項"圖標(biāo)+文案"的組合設(shè)計，也極大方便用戶清晰查看各個選項。

20.Interactive Drop Down Menus

Interactive Drop Down Menus 是一款專為搜索過濾器而打造的交互式下拉菜單設(shè)計。用戶展開菜單，即可根據(jù)需要選擇篩選條件。整個下拉菜單，組件豐富，結(jié)構(gòu)分明，值得借鑒。

21.Shop Drop Down Menu

Shop Drop Down Menu 是一款僅由圖標(biāo)按鈕打造的下拉菜單導(dǎo)航設(shè)計。

22.Mini Cooper

Mini Cooper 是寶馬旗下Mini Cooper汽車的官方網(wǎng)站。它的下拉菜單導(dǎo)航，結(jié)構(gòu)清晰，選擇多樣，特效豐富，引導(dǎo)力極強。

23.Board Star

Board Star 是一個在線的滑雪用品售賣店。它的導(dǎo)航欄也選用了下拉菜單式設(shè)計。卡片式布局，直觀易用。復(fù)古風(fēng)外觀，也讓用戶輕松記住該網(wǎng)站或品牌。

24.Porsche

Porsche 是德國保時捷汽車的官方網(wǎng)站。它的導(dǎo)航采用聯(lián)動式下拉菜單設(shè)計，以引導(dǎo)用戶快速查看和選擇所需車型。

25.Audi

Audi 是德國奧迪汽車的官方網(wǎng)站。它的網(wǎng)站也選用了聯(lián)動式下拉菜單導(dǎo)航設(shè)計。但相較于Porsche，它則選用了完全不同的布局方式。感興趣的設(shè)計師，可以對比兩款設(shè)計，尋求設(shè)計靈感。

26.Sony Play Station

Sony Play Station 采用了橫向展開的圖標(biāo)菜單導(dǎo)航，簡單的文字介紹，也加深了用戶對各個選項的理解。

27.Mr Clean

Mr Clean 直接通過產(chǎn)品圖片展示下拉菜單的各個選項，清晰易用，方便選擇。

28.KFC

KFC 采用了豎式下拉菜單設(shè)計。它的菜單展示動畫也十分新穎。

29.Taco Bell

Taco Bell 是一個在線的美食查找網(wǎng)站。側(cè)邊導(dǎo)航欄搭配豎式下拉菜單的設(shè)計，也是很有創(chuàng)意了。

30.Bern Tourism

Bern Tourism 也選用了下拉菜單式導(dǎo)航設(shè)計。為更好的引導(dǎo)用戶，下拉菜單內(nèi)還加入了更為高效的標(biāo)簽導(dǎo)航欄，以方便用戶根據(jù)需要點擊查看不同標(biāo)簽下的各個選項。

此外，我們也總結(jié)出了10個主要的設(shè)計技巧

1. 下拉級別不宜過多（最好不要超過兩級）

事實上，下拉級別過多或過于復(fù)雜的菜單設(shè)計，不僅操作起來麻煩，有時還會讓用戶無所適從，失去焦點，而無法做出選擇，用戶體驗極差。所以，菜單級別不宜設(shè)置太多，保持在一到兩級就好。

比如Slack官網(wǎng)導(dǎo)航（如下圖），就選用了干練的兩級下拉菜單設(shè)計，直觀清晰地展示了網(wǎng)站提供的各類資源。

當(dāng)然，如若網(wǎng)站導(dǎo)航確實較多、較復(fù)雜，必須采用兩級以上下拉菜單時，也需注意添加一些懸浮或選中動效，逐步引導(dǎo)用戶查看和選擇。

如下圖，WooCommerce的官方網(wǎng)站，就添加了極具引導(dǎo)性的鼠標(biāo)懸浮動效，逐步指引用戶查看各類選項，并按需做出選擇：

2. 打造清晰的菜單結(jié)構(gòu)

當(dāng)然，除了下拉級別，菜單整體的視覺層次結(jié)構(gòu)，也極為重要。設(shè)計師需要集中考慮菜單整體的字體排版、行高行距、結(jié)構(gòu)布局等等視覺元素，打造真正層次分明，一目了然的菜單設(shè)計。

以下面一款主營音樂器材的網(wǎng)站為例，設(shè)計師就選用戶了不同色彩、字體以及字體尺寸，構(gòu)建出結(jié)構(gòu)分明的下拉菜單。

3. 添加選擇或鼠標(biāo)懸浮特效，優(yōu)化菜單查看和選擇過程

豐富的菜單選中或鼠標(biāo)懸浮特效，不僅能夠幫助用戶快速聚焦當(dāng)前選項，優(yōu)化菜單查看和選擇過程，還能有效提升整個菜單的視覺吸引力，降低網(wǎng)站或App的跳出率。

所以，設(shè)計師在設(shè)計如圖下拉菜單時，也可嘗試添加吸睛的懸浮或選中特效，幫助用戶快速選擇所需內(nèi)容：

此外，添加懸浮特效時，

設(shè)計師也需注意特效打開和關(guān)閉的時間。太快或太慢，都有可能會影響到用戶體驗，而引起反效果。

4. 添加圖片或圖標(biāo)，優(yōu)化菜單選項設(shè)計

當(dāng)然，除了利用字體排版和行高行距等視覺元素，打造清晰的全局菜單結(jié)構(gòu)布局，設(shè)計師也可嘗試添加圖標(biāo)或圖片，突出單項的菜單選擇，引導(dǎo)用戶聚焦和選擇。

例如，下面的JetBlue網(wǎng)頁，頂部的下拉菜單式導(dǎo)航，就選用了大量簡易圖標(biāo)和高清圖片，簡單化菜單選項的同時，也有效提升整款設(shè)計的實用性和趣味性。

5. 確保菜單與網(wǎng)頁或App風(fēng)格樣式的一致性

不管哪種類型的下拉菜單設(shè)計，它們無疑都是網(wǎng)頁或App設(shè)計的一部分，需要與網(wǎng)站或App整體的設(shè)計風(fēng)格一致。簡單來講，就是需要在配色、字體以及圖標(biāo)樣式等方面，盡量與全局風(fēng)格保持一致。

以戴爾官方網(wǎng)站為例，整個網(wǎng)頁采用了經(jīng)典的藍白配色，它的下拉菜單導(dǎo)航設(shè)計，也沿用這一配色，白色菜單背景搭配藍色選項和引導(dǎo)性箭頭圖標(biāo)，與主頁有所區(qū)別，又相互映襯。

6. 無效或禁用選項應(yīng)置灰

當(dāng)菜單內(nèi)某個選項失效或不可用時，盲目地直接刪除往往會破壞整個菜單的結(jié)構(gòu)布局，影響用戶查看和選擇。這時，不如直接置灰將該選項，以預(yù)示其“被禁用”或“不可用”的狀態(tài)。此外，當(dāng)用戶在該選項停留時間較長時，可嘗試添加一定提示信息，解釋相關(guān)禁用原由。

7.添加展開動畫或交互，賦予菜單活力

除了懸浮或選中特效，適當(dāng)?shù)靥砑硬藛握归_動畫或交互（例如常見的劃入、推入、翻轉(zhuǎn)等），也能賦予菜單活力，增強其趣味性。

例如，以下一款名為Mediate的網(wǎng)頁模板，就采用了獨特的滑動動畫，以吸引用戶注意。

8. 利用半透明背景，突出菜單設(shè)計

設(shè)計過程中，為突出菜單內(nèi)容，設(shè)計師也需要注意菜單背景的設(shè)計。例如，設(shè)計師可嘗試添加半透明背景或背景圖，以突出整個菜單。

就像下圖中Econsultancy官網(wǎng)的導(dǎo)航設(shè)計，菜單呈現(xiàn)的白色選項，很容易受到主頁白色背景干擾，而影響用戶體驗。為改變這一情況，設(shè)計師就直接選用了半透明的黑色背景，輕松突出選項內(nèi)容的同時，也順利對菜單和主頁進行了視覺上的區(qū)分。

9. 利用鮮亮的純色或圖片背景，突出菜單設(shè)計

當(dāng)然，除了半透明的菜單背景，對比鮮明的純色背景或背景圖，也是不錯的選擇。

例如，下面的家具類電商網(wǎng)頁，就選用了鮮亮的桃紅色突出下拉菜單，效果極好。

10. 不斷測試

同其它網(wǎng)頁或App設(shè)計模塊一樣，下拉菜單也需要不斷測試，以確保所有選項或動效都正常運行。尤其是當(dāng)用于導(dǎo)航設(shè)計，并添加一定動效或交互時，不僅需要不定時測試菜單的加載時間，還需要不斷測試，以獲取最佳的鼠標(biāo)懸浮打開和關(guān)閉的時間，以確保用戶體驗達到最佳。

如何快速打造最優(yōu)下拉菜單設(shè)計？

了解完以上設(shè)計案例和技巧之后，下拉菜單究竟該如何設(shè)計呢？以下是設(shè)計師們常用的兩種方法：

1. 采用HTML或CSS設(shè)計模板，快速搭建

對UI/UX設(shè)計師而言，搭建最優(yōu)下拉菜單，最快的方法就是選用現(xiàn)成的設(shè)計模板。事實上，現(xiàn)今市場上有很多類似的HTML或CSS設(shè)計模板，免費或付費的都有。感興趣的設(shè)計師，可以在線搜索看看。

2. 選擇高效的設(shè)計工具，快速從頭設(shè)計

當(dāng)然，不需要模板的設(shè)計師，也可選擇一款高效的設(shè)計工具，快速從頭開始設(shè)計。而摹客作為一個設(shè)計+協(xié)作的一站式云平臺，不僅能夠幫助設(shè)計師們從頭快速搭建網(wǎng)頁或App設(shè)計原型，還能及時分享給其他團隊成員（例如其他設(shè)計師、產(chǎn)品經(jīng)理或開發(fā)人員），實現(xiàn)在線審閱、討論、分享、測試以及交付，簡化整個產(chǎn)品設(shè)計和開發(fā)過程。

結(jié)語

創(chuàng)意實用的下拉菜單設(shè)計，不僅能夠節(jié)省界面空間，還能夠有效提升用戶體驗，降低網(wǎng)站或App跳出率。

希望以上介紹的40個下拉菜單設(shè)計實例和技巧，能對大家有所幫助。

～此文轉(zhuǎn)載自UI設(shè)計派，如有侵權(quán)，請聯(lián)系刪除

用工具：關(guān)注私聊獲取編譯軟件+源代碼

功能演示

代碼如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* //將內(nèi)邊距,外邊距設(shè)置為0 .默認都是存在外邊距內(nèi)邊距的 */
			* {
				padding: 0px;
				margin: 0px;
				list-style: none;
				margin: auto;
			}

			/* //設(shè)置一級列表的寬度,背景 */
			.lii {
				background-color: yellow;
				width: 110px;
				border-right: 1px solid;
				border-left: 1px solid;
			}

			/* //設(shè)置二級列表的框線,寬,背景 */
			.ul li {
				border: 1px solid;

				width: 110px;
				background-color: red;
			}
		</style>
		<!-- //加載jquery文件 -->
		<script type="text/javascript" src="js/jquery-3.4.1.js">

		</script>
		<script type="text/javascript">
			//文檔就緒函數(shù)
			$(function() {
				//一級列表的點擊事件
				$(".lii").click(function() {
					//slideToggle是slideUp() 和 slideDown() 之間的切換：
					//children()子元素，點擊區(qū)域的子元素上滑消失或下滑出現(xiàn)
					$(this).children().stop().slideToggle(500);
				})
			})
		</script>
	</head>
	<body>
		<div id="d">
			<!-- 無序列表 -->
			<ul id="li">
				<!-- 一級列表001 -->
				<li class="lii">一級列表001
					<!-- 二級列表001 -->
					<ul class="ul">
						<li>二級列表001-1</li>
						<li>二級列表001-2</li>
						<li>二級列表001-3</li>
						<li>二級列表001-4</li>
						<li>二級列表001-5</li>
					</ul>
				</li>
				<!-- 一級列表002 -->
				<li class="lii">一級列表002
					<!-- 二級列表002 -->
					<ul class="ul">
						<li>二級列表002-1</li>
						<li>二級列表002-2</li>
						<li>二級列表002-3</li>
						<li>二級列表002-4</li>
						<li>二級列表002-5</li>
					</ul>
				</li>
				<!-- 一級列表003 -->
				<li class="lii">一級列表003
					<!-- 二級列表003 -->
					<ul class="ul">
						<li>二級列表003-1</li>
						<li>二級列表003-2</li>
						<li>二級列表003-3</li>
						<li>二級列表003-4</li>
						<li>二級列表003-5</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

0基礎(chǔ)學(xué)編程，純干貨，關(guān)注【一只聯(lián)動貓】不迷路

在線咨詢

上一篇：HTML多層級下拉框
下一篇：教你用讓背景圖片拉伸填充的css屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商