您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

JavaScript 實現微博風格下拉導航菜單：純 JS + CSS 無依賴方案

編輯：PHP 相關知識

JavaScript 實現微博風格下拉導航菜單：純 JS + CSS 無依賴方案

微博頂部導航的二級下拉菜單交互體驗極佳。本文用原生 JavaScript + CSS 實現無依賴版本，代碼精簡、易擴展、兼容所有現代瀏覽器。

一、HTML 結構

<ul id="nav">
  <li>
    <a href="#">首頁</a>
    <ul>
      <li><a href="#">全部廣播</a></li>
      <li><a href="#">好友</a></li>
      <li><a href="#">關注</a></li>
    &ul>
  </li>
  <li>
    <a href="#">微頻道</a>
    &ul>
      <li><a href="#">微頻道1</a></li>
      <li><a href="#">微頻道2</a></li>
    &ul>
  </li>
  <li>
    <a href="#">找人</a>
    &ul>
      <li><a href="#">明星</a></li>
      <li><a href="#">達人</a></li>
    &ul>
  </li>
  <li>
    <a href="#">微群</a>
    &ul>
      <li><a href="#">股票</a></li>
    &ul>
  </li>
</ul>

二、CSS 樣式（關鍵點：絕對定位 + 隱藏/顯示）

<style>
* { margin:0; padding:0; box-sizing:border-box; }
#nav {
  display: flex;
  height: 60px;
  line-height: 60px;
  background: #00f;
  list-style: none;
  font-family: "Microsoft YaHei", sans-serif;
}
#nav > li {
  position: relative; /* 為子菜單定位基準 */
  background: #00f;
}
#nav a {
  display: block;
  width: 100px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
#nav a:hover { background: #ccc; color: #333; }

/* 二級菜單 */
#nav li ul {
  position: absolute;
  top: 100%; left: 0;
  width: 130px;
  display: none; /* 默認隱藏 */
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 100;
}
#nav li ul li { background: transparent; }
#nav li ul a {
  width: 100%;
  color: #333;
  background: transparent;
  border-bottom: 1px solid #eee;
}
#nav li ul a:hover { background: #f5f5f5; }
#nav li ul li:last-child a { border-bottom: none; }

/* JS 控制類 */
#nav li:hover > ul { display: block; } /* CSS hover 兜底 */
</style>

三、JavaScript 交互增強（可選，支持點擊模式、延遲隱藏、鍵盤訪問）

<script>
document.addEventListener('DOMContentLoaded', function() {
  var nav = document.getElementById('nav');
  var items = nav.querySelectorAll('li');
  var hideTimer = null;

  items.forEach(function(item) {
    var submenu = item.querySelector('ul');
    if (!submenu) return;

    // 鼠標進入：顯示
    item.addEventListener('mouseenter', function() {
      clearTimeout(hideTimer);
      submenu.style.display = 'block';
    });

    // 鼠標離開：延遲隱藏（防誤觸）
    item.addEventListener('mouseleave', function() {
      hideTimer = setTimeout(function() {
        submenu.style.display = 'none';
      }, 200);
    });

    // 鍵盤支持：Tab 進入時顯示
    item.querySelector('a').addEventListener('focus', function() {
      submenu.style.display = 'block';
    });
    // 最後一個子項失去焦點隱藏
    var lastSubLink = submenu.querySelector('li:last-child a');
    if (lastSubLink) {
      lastSubLink.addEventListener('blur', function(e) {
        if (!item.contains(e.relatedTarget)) {
          submenu.style.display = 'none';
        }
      });
    }
  });
});
</script>