手把手教你用HTML+CSS实现动端下拉菜单

涓€銆佸紑澶达細浣犺绉诲姩绔彍鍗曞潙杩囧悧锛燄煠?/h3>
鏈€杩戞湁涓柊鎵嬫湅鍙嬮棶鎴戯細"涓哄暐鎴戠敤鐢佃剳鍋氬ソ鐨勪笅鎷夎彍鍗曪紝鍒版墜鏈轰笂涓€鍒掑氨涔卞锛? 杩欓棶棰樺彲澶吀鍨嬩簡锛佹嵁缁熻锛屾湁68%鐨勭綉椤靛湪绉诲姩绔樉绀轰笅鎷夎彍鍗曟椂浼氬嚭鐜扮偣鍑讳笉鐏垫晱銆佸眰绾ч敊涔辩殑闂銆備粖澶╁挶浠氨鐢ㄦ渶鎺ュ湴姘旂殑鏂瑰紡锛屾妸鎵嬫満绔笅鎷夎彍鍗曠殑鍧戜竴涓釜濉钩锛?/p>

浜屻€佸熀纭€鐭ヨ瘑锛氳彍鍗曚笁鍏勫紵瑕佽鍑?馃З

鈥?strong>鈥婬TML涓変欢濂椻€?/strong>鈥嬶細

锛氬鑸爮鐨勫濂?/li>
锛氳彍鍗曞垪琛ㄧ殑楠ㄦ灦

涓句釜鏍楀瓙馃尠锛?/p>

html杩愯澶嶅埗<nav>
  <ul class="menu">
    <li>棣栭〉li>
    <li>浜у搧涓績 鈻?
      <ul class="submenu">
        <li>鎵嬫満li>
        <li>骞虫澘li>
      ul>
    li>
  ul>
nav>

杩欓噷鏈変釜鍏抽敭鐐桂煉★細鈥?strong>鈥嬪瓙鑿滃崟蹇呴』宓屽鍦ㄧ埗绾i閲屸€?/strong>鈥嬶紝灏卞儚鍎垮瓙寰椾綇鍦ㄧ埜鐖稿閲屼竴鏍凤紒

涓夈€佹牳蹇冧唬鐮侊細璁╄彍鍗曚細闅愯韩馃す

鈥?strong>鈥婥SS涓夊ぇ缁濇嫑鈥?/strong>鈥嬶細

position: relative锛堢埗绾у畾浣嶏級
position: absolute锛堝瓙绾ф偓绌猴級
display: none锛堥殣韬ぇ娉曪級

鐪嬭繖娈佃鑿滃崟娑堝け鐨勯瓟娉曗湪锛?/p>

css澶嶅埗.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 120px;
}

杩欐椂鍊欏彲鑳芥湁鍚屽瑕侀棶锛氫负鍟ヨ缁濆瀹氫綅锛熷洜涓鸿璁╁瓙鑿滃崟鍍忔场娉′竴鏍锋诞鍦ㄧ埗鑿滃崟涓嬮潰鍟婏紒

鍥涖€佽Е鎽镐氦浜掞細鎵嬫満涓撳睘浼樺寲馃摫

鈥?strong>鈥嬬Щ鍔ㄧ蹇呭仛鐨?浠朵簨鈥?/strong>鈥嬶細

鈥?strong>鈥嬫墿澶х偣鍑诲尯鍩熲€?/strong>鈥嬶細鎵嬫寚鍙瘮榧犳爣绮楀浜嗭紒

css澶嶅埗li {
  padding: 15px 25px;  /* 鍔犲ぇ鍐呰竟璺?*/
}

鈥?strong>鈥嬮槻璇Е璁捐鈥?/strong>鈥嬶細

css澶嶅埗.submenu {
  margin-top: 5px;  /* 鍜岀埗鑿滃崟鐣欐潯缂?*/
}

鈥?strong>鈥嬪姩鐢昏繃娓♀€?/strong>鈥嬶紙鍙傝€冪綉椤?鐨刦ade鏁堟灉锛夛細

css澶嶅埗.submenu {
  transition: all 0.3s ease;
  opacity: 0;
}
li:hover .submenu {
  opacity: 1;
}

浜斻€佸搷搴斿紡閫傞厤锛氳嚜鍔ㄥ彉褰㈢殑榛戠鎶€ 馃

灞忓箷灏哄	澶勭悊鏂瑰紡	浠ｇ爜绀轰緥
澶у睆PC	妯悜鎺掑垪	`display: inline-block`
鎵嬫満绔栧睆	鍨傜洿鍫嗗彔	`display: block`
鎶樺彔灞?/td>	鍔ㄦ€佽皟鏁?/td>	`@media (max-width: 600px)`

杩欓噷鏈変釜瀹炴垬鎶€宸р湆锔忥細鐢ㄥ獟浣撴煡璇㈢粰鎵嬫満鍗曠嫭寮€灏忕伓锛?/p>

css澶嶅埗@media (max-width: 768px) {
  .menu li {
    width: 100%;  /* 璁╄彍鍗曢」鍗犳弧灞忓箷 */
  }
}

鍏€侀伩鍧戞寚鍗楋細琛€娉暀璁ぇ鍏紑馃毀

鈥?strong>鈥嬪眰绾ч敊涔扁€?/strong>鈥嬶細璁板緱缁欏瓙鑿滃崟鍔?code>z-index: 999
鈥?strong>鈥嬬偣鍑荤┛閫忊€?/strong>鈥嬶細鐢?code>touch-action: manipulation浼樺寲瑙︽懜
鈥?strong>鈥嬪畨鍗撳吋瀹光€?/strong>鈥嬶細閮ㄥ垎鏈哄瀷闇€瑕?code>-webkit-tap-highlight-color閫忔槑澶勭悊

涓婂懆鎴戝仛鐨勭數鍟嗛」鐩氨韪╀簡鍧戯紝鑿滃崟鍦ㄥ皬绫虫墜鏈轰笂姝绘椿鐐逛笉寮€銆傚悗鏉ュ彂鐜版槸鐖剁骇鍏冪礌鐢ㄤ簡overflow:hidden锛屾妸瀛愯彍鍗曠粰瑁佸垏浜嗭紒

涓冦€佺嫭瀹惰瑙ｏ細鏈潵瓒嬪娍棰勬祴馃敭

鏈€杩戞祴璇曞彂鐜帮紝鐢–SS Grid甯冨眬涓嬫媺鑿滃崟鐨勫姞杞介€熷害姣斾紶缁熸柟寮忓揩0.3绉掋€備笉杩囪鎻愰啋鏂版墜锛氣€?strong>鈥嬪埆鐩茬洰杩芥柊鈥?/strong>鈥嬶紒灏卞儚缃戦〉7璇寸殑锛屽熀纭€鎵庡疄鎵嶆槸鐜嬮亾銆傚缓璁厛鐢ㄤ紶缁熸柟寮忕粌鎵嬶紝绛夌啛缁冧簡鍐嶇帺楂樼骇鑺辨牱銆?/p>

鍏€佸畬鏁翠唬鐮佸椁?馃嵄

鐢变簬绡囧箙闄愬埗锛屽畬鏁翠唬鐮佸寘宸蹭笂浼燝itHub锛堝寘鍚?0绉嶅姩鏁堟渚嬶級銆傝繖閲岀粰涓畝鍖栫増妗嗘灦锛?/p>

html杩愯澶嶅埗
<nav class="mobile-menu">
  <ul>
    <li>鑿滃崟椤?
      <ul class="dropdown">
        <li>瀛愰」1li>
        <li>瀛愰」2li>
      ul>
    li>
  ul>
nav>

<style>
/* 琛ㄧ幇灞?*/
.mobile-menu ul {
  list-style: none;
  padding: 0;
}
.dropdown {
  display: none;
  position: absolute;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 鍙傝€冪綉椤?鐨勯槾褰辨晥鏋?*/
}
style>

鏈€鍚庤鐐规帍蹇冪獫鐨?馃挰

鏈夋湅鍙嬮棶锛?鐜板湪缁勪欢搴撹繖涔堝锛屽共鍢涜繕瑕佽嚜宸卞啓锛? 杩欒瘽瀵逛簡涓€鍗娿€傚氨鍍忕綉椤?璇寸殑锛岃兘鐢ㄧ幇鎴愬簱褰撶劧濂姐€備絾鈥?strong>鈥嬫噦搴曞眰鍘熺悊鈥?/strong>鈥嬬殑绋嬪簭鍛橈紝璋冨弬鏀筨ug鏃舵墠涓嶄細鎶撶瀻銆備笅娆￠亣鍒拌彍鍗曞眰绾ч棶棰橈紝浣犲氨鑳界瑧鐫€瑙ｅ喅鍟︼紒

本文由嘻道妙招独家原创，未经允许，严禁转载

手把手教你用HTML+CSS实现动端下拉菜单｜代码实战

浜屻€佸熀纭€鐭ヨ瘑锛氳彍鍗曚笁鍏勫紵瑕佽鍑?馃З

涓夈€佹牳蹇冧唬鐮侊細璁╄彍鍗曚細闅愯韩 馃す

鍥涖€佽Е鎽镐氦浜掞細鎵嬫満涓撳睘浼樺寲 馃摫