整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖1
一、開始吧，我們先做一個盒子drop，它以后要裝的是按鈕和下拉列表。
圖2
二、在盒子drop里面做一個按鈕dropbt。
圖3
圖4
三、按鈕有點丑了，于是我們給按鈕加點樣式。
圖5
圖6
四、下面我們做出下拉列表，它們是一串鏈接，我們用一個盒子dropbox裝著。
圖7
圖8
五、列表是橫著的，而且不怎么好看，我們先改超鏈接a的樣式。
圖9
圖10
六、菜單列表好看許多了，我們給列表盒子dropbox加點樣式，比如陰影。
圖11
圖12
七、再好看的菜單列表一開始也是要先隱藏的。
圖13
圖14
八、我們讓鼠標移到按鈕上時，按鈕顏色變淺。
圖15
圖16
九、現在可以設置點擊后，下拉菜單出現了。
圖17
圖18
十、下拉菜單出現了，但你會發現鼠標在右側時，菜單也會彈出來，我們改一下樣式，解決這個問題，再次移過去的時候，你會發現只有在按鈕位置才會彈出菜單了。
圖19
十一、完善一下，當鼠標移動菜單列表時，背景色改變。
圖20
圖21
現帶輸入框的下拉菜單，方便用戶在搜索時候可以根據歷史記錄快速定位自己要搜索的關鍵詞！
效果如下：
實現代碼：
html:
css:
javascript：
拉菜單可以說是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設計派，如有侵權，請聯系刪除
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
