Блог

Главная - Вопросы по программированию - Многоуровневое выпадающее меню в Bootstrap 5

Многоуровневое выпадающее меню в Bootstrap 5

#twitter-bootstrap #bootstrap-5

#twitter-bootstrap #bootstrap-5

Вопрос:

Я хочу использовать многоуровневое выпадающее меню для нового Bootsrap 5. Я пробую старые коды для 4, но ничего не работает. Есть ли у кого-нибудь рабочий код для Bootstrap 5?

Комментарии:

1. Не могли бы вы добавить некоторый код, над которым вы работали. Этот форум может помочь с ошибками, запросами и т. Д. Базовый код, который вы должны добавить, чтобы показать свои усилия.

2. Примеры здесь, извините: getbootstrap.com/docs/5.0/examples/navbars

3. Почти опубликовал тот же вопрос, простой пример для этого был бы полезен.

Ответ №1:

 .dropdown:hover >.dropdown-menu{
  display: block !important;
}
.dropdown-submenu:hover > .dropdown-menu{
  display: block !important;
    left: 100%;
    margin-top: -37px;
}

.dropdown-item{
  font-size: small; /* 13px */
}
.dropdown-toggle::after{
  font-size: var(--font-md);
  margin-bottom: -2px;
}
.dropdown-menu li a.active{
  color:#fff;
}

.custom-toggle-arrow{
      font-size: 18px;
      margin-top: 1px;
      line-height: 12px;
} 
 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <nav class="nav justify-content-center" aria-label="Secondary navigation">
              <li class="nav-item"><a class="nav-link" href="#">Nav Item 1</a></li>
        
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"                     aria-expanded="false">
                  Nav Item 2
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#"> Menu Item 1</a></li>
                  <li><a class="dropdown-item" href="#"> Menu Item 2</a></li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item" href="#"> Second Level <span
                        class="float-end custom-toggle-arrow">amp;#187</span></a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Second Level Item 1</a></li>
                      <li><a class="dropdown-item" href="#">Second Level Item 2</a></li>
    
                      <li class="dropdown-submenu">
                        <a class="dropdown-item" href="#"> Third Level <span
                            class="float-end custom-toggle-arrow">amp;#187</span></a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Third Level Item 1</a></li>
                          <li><a class="dropdown-item" href="#">Third Level Item 2</a></li>
                        </ul>
                      </li>
    
    
                    </ul>
                  </li>
                </ul>
              </li>
  </nav>
            
           
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

Метки: