動菜單通常是指一個下拉框的選項值發生改變后,另一個下拉框的選項值會發生對應的變化。在 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小時內與您取得聯系。