如何使用Bootstrap 4.6实现Digikala同款导航栏悬浮下拉容器

核心调整点 #

• 替换Bootstrap下拉菜单默认点击触发逻辑，改为鼠标悬停触发展开
• 改造下拉菜单为双栏mega菜单结构：左侧为一级分类列表，右侧为对应分类的子链接容器
• 实现左侧分类悬停时右侧内容的联动切换
• 兼容RTL（从右到左）布局，适配波斯语站点使用需求

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<style>
/* 悬停触发一级下拉菜单 */
.navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}
/* 一级下拉菜单宽幅配置 */
.navbar .dropdown-menu {
    width: 900px;
    padding: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: none;
    overflow: hidden;
}
/* 双栏布局容器 */
.menu-grid {
    display: flex;
    min-height: 400px;
}
/* 左侧分类栏 */
.category-list {
    width: 250px;
    background: #f8f9fa;
    border-left: 1px solid #e9ecef;
}
.category-item {
    width: 100%;
    text-align: right;
    padding: 12px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
}
.category-item:hover {
    background: #fff;
    color: #2385bb;
}
/* 右侧内容显示区 */
.category-content {
    flex: 1;
    padding: 20px;
    display: none;
}
.category-content.active {
    display: block;
}
/* 子链接样式 */
.content-col h6 {
    color: #2385bb;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}
.content-col a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 4px 0;
    margin-bottom: 6px;
}
.content-col a:hover {
    color: #2385bb;
}
</style>

<!-- 如需开启RTL布局，在nav标签添加dir="rtl"属性即可 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" style="color: purple;" href="#">Partineh</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <div class="dropdown">
          <button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <h5>دسته بندی کالاها</h5>
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <div class="menu-grid">
              <!-- 左侧分类列表 -->
              <div class="category-list">
                <button class="category-item" data-target="#cat1">دیجیتال</button>
                <button class="category-item" data-target="#cat2">خوردگی‌ها</button>
                <button class="category-item" data-target="#cat3">پوشاک</button>
                <button class="category-item" data-target="#cat4">خانه و آشپزخانه</button>
              </div>
              <!-- 右侧对应分类内容 -->
              <div class="category-content active" id="cat1">
                <div class="row">
                  <div class="col-4 content-col">
                    <h6>لپ‌تاپ و کامپیوتر</h6>
                    <a href="#">لپ‌تاپ</a>
                    <a href="#">کیبورد</a>
                    <a href="#">موس</a>
                    <a href="#">هارد اکسترنال</a>
                  </div>
                  <div class="col-4 content-col">
                    <h6>موبایل و تبلت</h6>
                    <a href="#">گوشی موبایل</a>
                    <a href="#">تبلت</a>
                    <a href="#">پاوربانک</a>
                    <a href="#">کابل شارژ</a>
                  </div>
                  <div class="col-4 content-col">
                    <h6>لوازم جانبی</h6>
                    <a href="#">هدفون</a>
                    <a href="#">اسپیکر بلوتوث</a>
                    <a href="#">کاور موبایل</a>
                    <a href="#">فلم محافظ</a>
                  </div>
                </div>
              </div>
              <div class="category-content" id="cat2">
                <div class="row">
                  <div class="col-4 content-col">
                    <h6>خوراکی‌های خشک</h6>
                    <a href="#">برنج</a>
                    <a href="#">ماکارونی</a>
                    <a href="#">قند و شکر</a>
                  </div>
                  <div class="col-4 content-col">
                    <h6>نوشیدنی</h6>
                    <a href="#">نوشابه</a>
                    <a href="#">آب معدنی</a>
                    <a href="#">چای و قهوه</a>
                  </div>
                </div>
              </div>
              <div class="category-content" id="cat3">
                <div class="row">
                  <div class="col-4 content-col">
                    <h6>پوشاک مردانه</h6>
                    <a href="#">پیراهن</a>
                    <a href="#">شلوار</a>
                    <a href="#">کفش</a>
                  </div>
                  <div class="col-4 content-col">
                    <h6>پوشاک زنانه</h6>
                    <a href="#">مانتو</a>
                    <a href="#">روسری</a>
                    <a href="#">کفش زنانه</a>
                  </div>
                </div>
              </div>
              <div class="category-content" id="cat4">
                <div class="row">
                  <div class="col-4 content-col">
                    <h6>لوازم آشپزخانه</h6>
                    <a href="#">یخچال</a>
                    <a href="#">اجاق گاز</a>
                    <a href="#">ماشین ظرفشویی</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">سوپرمارکت</a>
      </li>
    </ul>
  </div>
</nav>

<script>
// 左侧分类悬停切换右侧内容
$('.category-item').hover(function() {
    $('.category-content').removeClass('active');
    const target = $(this).data('target');
    $(target).addClass('active');
});
</script>

可调整配置 #

• 可修改.navbar .dropdown-menu的width参数调整整体菜单宽度
• 可修改.menu-grid的min-height参数调整菜单最小高度
• 可根据分类数量增减左侧.category-item和右侧对应.category-content模块

内容的提问来源于stack exchange，提问作者bardia riahi