整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
动菜单通常是指一个下拉框的选项值发生改变后，另一个下拉框的选项值会发生对应的变化。在 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实现联动菜单的示例，可以根据具体的业务需求进行扩展和修改。
拉菜单可以说是UI设计中最普遍使用的设计元素之一了。它们因为能够有效节省界面空间、操作简单、体验绝佳等优点，而被广泛应用到网页或App界面导航、搜索以及选择模块设计之中。本篇文章，摹客为大家整理了40个最新创意下拉菜单设计实例和技巧，以供广大设计师欣赏、学习和借鉴。
Converse是一个在线售卖最新衣物、鞋子和旅行装备的时尚网站。它的首页选用了点击可触发的下拉菜单式导航设计。整个下拉菜单，最大的特色就是添加了非常丰富的鼠标悬浮特效，以帮助用户快速聚焦各个选项。两栏的布局设计，直观易读，也方便用户快速查看和选择。
Santa Cruz 是一个网上的自行车商店。它的下拉菜单导航，利用大量“图片+文字”的卡片设计，直接清晰地展示了网站的各类商品。如此，用户通过导航菜单，就能提前对各个商品有所了解，并快速选择。省略掉用户需要逐一点开、查看详情并最后才能做出选择的复杂过程，非常实用。适合各类在线商店学习和借鉴。
Helias Oils 是一个在线精油网站。它的首页也选用了点击可触发的下拉菜单式导航。除了丰富的悬浮特效，设计师还添加了炫酷的波浪式转场动效，吸引用户停留的同时，也快速引导用户做出选择。
Whirling CSS3 Drop Down Menu 是一款视觉效果极佳的CSS导航下拉菜单模板设计。它最有趣的地方就是添加了十分新颖的扭转展开式动效。适合各类暗黑风网页设计使用。感兴趣的设计师，可以点击“返回教程”查看制作详情。
Lion Burger 是一个使用按钮式下拉菜单导航的网站。它最值得关注的就是下拉菜单所选用的配色。红色选项搭配白色文案的设计，清晰展示菜单选项内容的同时，也与主页黑色背景形成鲜明对比，让用户不自觉的将关注点放在导航上。
CSS3 Slide Drop Down Box Menu 是另一款精美的下拉菜单式导航设计。鼠标指向主菜单选项时， 相应的模块图片和菜单列表也会随即展示。菜单选项向左、向右自动滑出的动效设计，也极赋创意。感兴趣的小伙伴，可以下载看看。
Responsive drop down navigation menu 是一款为专为Bootstrap网页模板而特制的下拉菜单导航。整个导航分为四栏，前三栏通过纯文本设计，依次罗列了商品不同分类下的各个选项，而最后一栏则通过商品图片轮播设计，引导用户选择， 结构分明，布局清晰，任何用户都能快速熟悉并按需选择。适合具有类似清晰产品分类的网页或App借鉴。
Drop Down Menu Bryan 是一款三级下拉菜单导航设计。用户点击左上角的导航按钮，各级菜单就会随即一步步展示，轻松引导用户快速找到所需选项。适合具有复杂导航系统的网站借鉴和使用。
PopSockets 是一款色彩丰富的概念性下拉菜单导航设计。整个导航设计除了高效直观的四栏布局，还添加了多彩的产品绘画进行点缀，精美实用。
Minimal Drop Down Menu Exploration 是一款典型的极简风下拉菜单导航设计。整个网页的主菜单导航栏，直接简化成了细小的色彩条。鼠标悬浮，相关菜单选项才会随即展开。鼠标离开后，又立即收起。反应灵敏，简洁高效。各类极简风网页不妨学习一下。
Creative Drop Down Menu with Icons 是一个结构分明的下拉菜单导航。蓝色背景搭配白色选项，美观时尚。镂空的图标点缀，也有力突出了每个选项，让整个菜单结构布局更加清晰。
Zenith Arena De Lille Drop Down Menu 是一个专为室内竞技场网站而打造的下拉菜单导航。不同于一般网页通过添加蒙版或新窗口的方式，展示下拉菜单，该款设计直接将菜单融合在界面主页上，点击触发，整个页面也会随之展开或隐藏，操作展示更便捷。对类似菜单展示方式感兴趣的设计师，可以了解一下。
Minimal Drop Down Menu Interaction 是一款专为简约风悬浮导航按钮而打造的下拉菜单设计。整个菜单和选项都由简单的图标构成， 适用于各类简约风App设计。
Mobile App Drop Down Menu 是另一个简约风App可参考的导航按钮设计。除了极简的图标导航菜单，此款设计还添加了横向滑出动效，更加生动地展示低一级的菜单选项，吸引用户关注。
Notification Drop Down Box Design 是一个消息提示类下拉菜单设计。用户指向顶部的消息提示图标，菜单随即展开，清晰呈现相关涉及人员、发送时间以及消息内容等信息，实用性极强。
Notification Drop Down Menu 是另一款专为消息提示设计打造的下拉菜单。不同于上一个案例，布满图片和文字，此款设计外观上更加简约美观。可爱的卡通猫绘画，也无形中引导用户快速聚焦于当前的选中项，帮助他们快速做出选择。
HTML Drop Down Menu Animation 也是一个极简的导航按钮下拉菜单设计，提供免费的HTML、CSS以及JS源代码资源。它最值得效仿的地方，就是为下拉菜单添加了逐一展开各个选项的动效设计，个性而独特。
About Us Drop Down Menu Animation 是一个专为网页“关于我们”的导航模块而设计的下拉菜单。整个设计最亮眼的地方就是添加了菜单弹出动效，灵动而富有活力。单个选项"图标+文案"的组合设计，也极大方便用户清晰查看各个选项。
Interactive Drop Down Menus 是一款专为搜索过滤器而打造的交互式下拉菜单设计。用户展开菜单，即可根据需要选择筛选条件。整个下拉菜单，组件丰富，结构分明，值得借鉴。
21.Shop Drop Down Menu
Shop Drop Down Menu 是一款仅由图标按钮打造的下拉菜单导航设计。
Mini Cooper 是宝马旗下Mini Cooper汽车的官方网站。它的下拉菜单导航，结构清晰，选择多样，特效丰富，引导力极强。
Board Star 是一个在线的滑雪用品售卖店。它的导航栏也选用了下拉菜单式设计。卡片式布局，直观易用。复古风外观，也让用户轻松记住该网站或品牌。
Porsche 是德国保时捷汽车的官方网站。它的导航采用联动式下拉菜单设计，以引导用户快速查看和选择所需车型。
Audi 是德国奥迪汽车的官方网站。它的网站也选用了联动式下拉菜单导航设计。但相较于Porsche， 它则选用了完全不同的布局方式。感兴趣的设计师，可以对比两款设计，寻求设计灵感。
Sony Play Station 采用了横向展开的图标菜单导航，简单的文字介绍，也加深了用户对各个选项的理解。
Mr Clean 直接通过产品图片展示下拉菜单的各个选项，清晰易用，方便选择。
KFC 采用了竖式下拉菜单设计。它的菜单展示动画也十分新颖。
Taco Bell 是一个在线的美食查找网站。侧边导航栏搭配竖式下拉菜单的设计，也是很有创意了。
Bern Tourism 也选用了下拉菜单式导航设计。为更好的引导用户，下拉菜单内还加入了更为高效的标签导航栏，以方便用户根据需要点击查看不同标签下的各个选项。
事实上，下拉级别过多或过于复杂的菜单设计，不仅操作起来麻烦，有时还会让用户无所适从，失去焦点，而无法做出选择，用户体验极差。所以，菜单级别不宜设置太多，保持在一到两级就好。
比如Slack官网导航（如下图），就选用了干练的两级下拉菜单设计，直观清晰地展示了网站提供的各类资源。
当然，如若网站导航确实较多、较复杂，必须采用两级以上下拉菜单时，也需注意添加一些悬浮或选中动效，逐步引导用户查看和选择。
如下图，WooCommerce的官方网站，就添加了极具引导性的鼠标悬浮动效，逐步指引用户查看各类选项， 并按需做出选择：
当然，除了下拉级别，菜单整体的视觉层次结构，也极为重要。设计师需要集中考虑菜单整体的字体排版、行高行距、结构布局等等视觉元素，打造真正层次分明，一目了然的菜单设计。
以下面一款主营音乐器材的网站为例， 设计师就选用户了不同色彩、字体以及字体尺寸，构建出结构分明的下拉菜单。
丰富的菜单选中或鼠标悬浮特效，不仅能够帮助用户快速聚焦当前选项，优化菜单查看和选择过程， 还能有效提升整个菜单的视觉吸引力，降低网站或App的跳出率。
所以，设计师在设计如图下拉菜单时，也可尝试添加吸睛的悬浮或选中特效，帮助用户快速选择所需内容：
此外，添加悬浮特效时，
设计师也需注意特效打开和关闭的时间。太快或太慢，都有可能会影响到用户体验，而引起反效果。
当然，除了利用字体排版和行高行距等视觉元素，打造清晰的全局菜单结构布局，设计师也可尝试添加图标或图片，突出单项的菜单选择，引导用户聚焦和选择。
例如， 下面的JetBlue网页，顶部的下拉菜单式导航，就选用了大量简易图标和高清图片，简单化菜单选项的同时，也有效提升整款设计的实用性和趣味性。
不管哪种类型的下拉菜单设计，它们无疑都是网页或App设计的一部分，需要与网站或App整体的设计风格一致。简单来讲，就是需要在配色、字体以及图标样式等方面，尽量与全局风格保持一致。
以戴尔官方网站为例，整个网页采用了经典的蓝白配色，它的下拉菜单导航设计，也沿用这一配色，白色菜单背景搭配蓝色选项和引导性箭头图标，与主页有所区别，又相互映衬。
当菜单内某个选项失效或不可用时，盲目地直接删除往往会破坏整个菜单的结构布局，影响用户查看和选择。这时，不如直接置灰将该选项，以预示其“被禁用”或“不可用”的状态。此外，当用户在该选项停留时间较长时，可尝试添加一定提示信息，解释相关禁用原由。
除了悬浮或选中特效，适当地添加菜单展开动画或交互（例如常见的划入、推入、翻转等），也能赋予菜单活力，增强其趣味性。
例如，以下一款名为Mediate的网页模板，就采用了独特的滑动动画，以吸引用户注意。
设计过程中，为突出菜单内容，设计师也需要注意菜单背景的设计。例如，设计师可尝试添加半透明背景或背景图，以突出整个菜单。
就像下图中Econsultancy官网的导航设计，菜单呈现的白色选项，很容易受到主页白色背景干扰，而影响用户体验。为改变这一情况，设计师就直接选用了半透明的黑色背景，轻松突出选项内容的同时，也顺利对菜单和主页进行了视觉上的区分。
当然，除了半透明的菜单背景，对比鲜明的纯色背景或背景图，也是不错的选择。
例如，下面的家具类电商网页，就选用了鲜亮的桃红色突出下拉菜单，效果极好。
同其它网页或App设计模块一样，下拉菜单也需要不断测试，以确保所有选项或动效都正常运行。尤其是当用于导航设计，并添加一定动效或交互时， 不仅需要不定时测试菜单的加载时间，还需要不断测试，以获取最佳的鼠标悬浮打开和关闭的时间，以确保用户体验达到最佳。
了解完以上设计案例和技巧之后，下拉菜单究竟该如何设计呢？以下是设计师们常用的两种方法：
对UI/UX设计师而言，搭建最优下拉菜单，最快的方法就是选用现成的设计模板。事实上，现今市场上有很多类似的HTML或CSS设计模板，免费或付费的都有。感兴趣的设计师，可以在线搜索看看。
当然，不需要模板的设计师，也可选择一款高效的设计工具，快速从头开始设计。而摹客作为一个设计+协作的一站式云平台，不仅能够帮助设计师们从头快速搭建网页或App设计原型，还能及时分享给其他团队成员（例如其他设计师、产品经理或开发人员），实现在线审阅、讨论、分享、测试以及交付，简化整个产品设计和开发过程。
创意实用的下拉菜单设计， 不仅能够节省界面空间，还能够有效提升用户体验，降低网站或App跳出率。
希望以上介绍的40个下拉菜单设计实例和技巧，能对大家有所帮助。
～此文转载自UI设计派，如有侵权，请联系删除
用工具：关注私聊获取编译软件+源代码
功能演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* //将内边距,外边距设置为0 .默认都是存在外边距内边距的 */
* {
padding: 0px;
margin: 0px;
list-style: none;
margin: auto;
}
/* //设置一级列表的宽度,背景 */
.lii {
background-color: yellow;
width: 110px;
border-right: 1px solid;
border-left: 1px solid;
}
/* //设置二级列表的框线,宽,背景 */
.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">
//文档就绪函数
$(function() {
//一级列表的点击事件
$(".lii").click(function() {
//slideToggle是slideUp() 和 slideDown() 之间的切换：
//children()子元素，点击区域的子元素上滑消失或下滑出现
$(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基础学编程，纯干货，关注【一只联动猫】不迷路
*请认真填写需求信息，我们会在24小时内与您取得联系。
