家好，今天给大家介绍一款，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实现联动菜单的示例，可以根据具体的业务需求进行扩展和修改。