家好，今天給大家介紹一款，css+JavaScript實現的二級導航菜單html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

點擊左側菜單欄即可彈出二級菜單（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：20225，需要的朋友，訪問下面鏈接后，搜索20225，即可獲取。

「鏈接」

家好，今天給大家介紹一款，JavaScript+css實現的滾動和懸停動畫效果的多彩菜單web前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

拖動菜單時，菜單會出現折疊效果，非常好看（圖2）

自適應分辨率（圖3）

源碼完整，需要的朋友可以下載學習（圖4）

本源碼編碼：10193，需要的朋友，訪問下面鏈接后，搜索10193，即可獲取。

就愛UI - 分享UI設計的點點滴滴

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

假設我們有三個下拉框，分別是“省份”、“城市”和“區縣”。當“省份”下拉框的選項值發生改變時，我們需要動態更新“城市”下拉框的選項值，并且根據“城市”的選項值動態更新“區縣”下拉框的選項值。具體實現步驟如下：

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

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

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

<label>區縣：</label>
<select id="district"></select>

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

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

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

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

  // 觸發區縣下拉框更新
  updateDistrict();
}

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

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

  // 根據區縣列表，動態生成區縣下拉框的選項
  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");

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

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

現在我們已經完成了省份和城市兩個下拉框的聯動效果，接下來我們需要再次綁定城市下拉框的change事件，以實現城市與區縣下拉框的聯動。

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

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

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

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;

  // 清空區縣下拉框
  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);

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

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

在updateCounty函數中，我們根據選擇的省份和城市，動態生成區縣下拉框的選項。

在initPage函數中，我們綁定了城市下拉框的change事件，并調用updateCounty函數初始化區縣下拉框的選項。

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

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

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

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

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

以上就是一個簡單的基于JavaScript和HTML DOM實現聯動菜單的示例，可以根據具體的業務需求進行擴展和修改。