Выровнять подменю Bootstrap 4.5 с левым родительским меню - PullRequest
Новая
       2

Выровнять подменю Bootstrap 4.5 с левым родительским меню

0 голосов
/ 19 июня 2020

Я пытаюсь выровнять подменю под всеми родительскими меню и выровнять по левому родительскому меню.

Пожалуйста, ПРИМЕЧАНИЕ Я не хочу выравнивать подменю под родительским , Я хочу выровнять подменю под меню рисования

В настоящее время я не могу достичь того, что мне нужно, даже с абсолютным положением и преобразованием

Мой код (css / html) ниже: 

<!doctype html>
<html lang="en">
   <head>
      <title>Title</title>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <style>
         @media (min-width: 768px) {
           .nav li {
             display: block;
             transition-duration: 0.5s;
           }
         }
         @media (min-width: 768px) {
           li:hover {
             background: #ffffff;
             cursor: pointer;
           }
         }
         @media (min-width: 768px) {
           ul.nav li ul.multi-column {
             visibility: hidden;
             opacity: 0;
             position: absolute;
             transition: all 0.5s ease;
             margin-top: 1.1rem;
             left: 0;
             display: none;
           }
         }
         @media (min-width: 768px) {
           ul.nav li:hover > ul.multi-column, ul li ul:hover {
             visibility: visible;
             opacity: 1;
             display: block;
           }
         }
         @media (min-width: 768px) {
           ul.nav li ul.multi-column li {
             clear: both;
             width: 100%;
           }
         }
         @media (min-width: 768px) {
           .multi-column {
             border: 1px solid black;
             border-top: 0;
             background-color: #ffffff!important;
             margin-top: 0!important;
             width: 500px;
           }
         }
         @media (min-width: 768px) {
           .multi-column-dropdown {
             /*margin: 0;*/
             padding: 0 0 0 5px;
           }
         }
         .dropdown-menu-centre {
           right: auto!important;
           left: auto!important;
           /*-webkit-transform: translate(0, 0);*/
           /*transform: translate(0, 0);*/
           background-color: green!important;
         }
         .dropdown-menu-last {
           right: auto;
           left: -85%;
           -webkit-transform: translate(-85%, 0);
           transform: translate(-85%, 0);
         }
      </style>
   </head>
   <body>
      <nav class="navbar navbar-light navbar-expand-md navigation-clean">
         <div class="container">
            <button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
               <ul class="nav navbar-nav mx-auto">
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>    
                     <ul class="dropdown-menu multi-column dropdown-menu-centre">
                        <div class="row" role="menu">
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Bristle Paint Brushes
                                 </li>
                                 <li>
                                    Paints Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Anti Condensation Paint
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Paints Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Woodcare</a>
                     <ul class="dropdown-menu multi-column dropdown-menu-centre">
                        <div class="row" role="menu">
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Wood Link one
                                 </li>
                                 <li>
                                    Wood Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Wood Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Brushes &amp; Rollers</a>
                     <ul class="dropdown-menu multi-column dropdown-menu-centre">
                        <div class="row" role="menu">
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Brushes Link one
                                 </li>
                                 <li>
                                    Brushes Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Brushes Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">PPE</a>
                     <ul class="dropdown-menu multi-column dropdown-menu-last">
                        <div class="row" role="menu">
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    PPE Link one
                                 </li>
                                 <li>
                                    PPE Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    PPE Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
</html>

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

введите описание изображения здесь

Любая помощь приветствуется

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Спасибо за ответ, я попробовал ваш код, но у меня он все еще не работал, как показано на изображении ниже.

enter image description here

I finally got it to work yesterday via jQuery, the code I used is below.

$(".nav-link").on("mouseover",function(){
        var leftAlign = $("#main-div").offset();
    var i;
        
        for(i = 1; i < 7; i++)
            {
    $(".sub-container-" + i).css("position", "fixed");
    $(".sub-container-" + i).css("left", + Math.floor(leftAlign.left) +"px" );
    $(".sub-container-" + i).css("width", "600px");
            }

CSS used to set the top alignment

@media (min-width: 768px) {
  .sub-container-top {
    position: absolute;
    top: 362px;
  }
}

@media (min-width: 992px) {
  .sub-container-top {
    position: absolute;
    top: 262px;
  }
}

The code I used produced the desired effect

введите описание изображения здесь

0 голосов
/ 20 июня 2020

Рабочий Gif, поскольку вы сказали, что он не работает ..: enter image description here

Here you go: https://jsfiddle.net/h4ynogLe/

<!doctype html>
<html lang="en">
   <head>
      <title>Title</title>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <style>
         @media (min-width: 768px) {
           .nav li {
             display: block;
             transition-duration: 0.5s;
           }
         }
         @media (min-width: 768px) {
           li:hover {
             background: #ffffff;
             cursor: pointer;
           }
         }
         @media (min-width: 768px) {
           ul.nav li ul.multi-column {
             visibility: hidden;
             opacity: 0;
             position: absolute;
             transition: all 0.5s ease;
             margin-top: 1.1rem;
             left: 0;
             display: none;
           }
         }
         @media (min-width: 768px) {
           ul.nav li:hover > ul.multi-column, ul li ul:hover {
             visibility: visible;
             opacity: 1;
             display: block;
           }
         }
         @media (min-width: 768px) {
           ul.nav li ul.multi-column li {
             clear: both;
             width: 100%;
           }
         }
         @media (min-width: 768px) {
           .multi-column {
             border: 1px solid black;
             border-top: 0;
             background-color: #ffffff!important;
             margin-top: 0!important;
             width: 500px;
           }
         }
         @media (min-width: 768px) {
           .multi-column-dropdown {
             /*margin: 0;*/
             padding: 0 0 0 5px;
           }
         }
         .dropdown-menu-centre {
           right: auto!important;
           left: auto!important;
           /*-webkit-transform: translate(0, 0);*/
           /*transform: translate(0, 0);*/
           background-color: green!important;
         }
         .dropdown-menu-last {
           right: auto;
           left: -85%;
           -webkit-transform: translate(-85%, 0);
           transform: translate(-85%, 0);
         }
      </style>
   </head>
   <body>
      <nav class="navbar navbar-light navbar-expand-md navigation-clean">
         <div class="container">
            <button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
               <ul class="nav navbar-nav mx-auto">
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Paints</a>    
                     <ul class="dropdown-menu multi-column dropdown-menu-centre ml-4">
                        <div class="row" role="menu">
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Bristle Paint Brushes
                                 </li>
                                 <li>
                                    Paints Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Anti Condensation Paint
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-4">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Paints Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Woodcare</a>
                     <ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5">
                        <div class="row" role="menu">
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Wood Link one
                                 </li>
                                 <li>
                                    Wood Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Wood Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">Brushes &amp; Rollers</a>
                     <ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5" style="margin-left: -150px !important;">
                        <div class="row" role="menu">
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Brushes Link one
                                 </li>
                                 <li>
                                    Brushes Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    Brushes Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
                  <li class="nav-item dropdown" role="presentation">
                     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expand="false">PPE</a>
                     <ul class="dropdown-menu multi-column dropdown-menu-centre ml-n5 pl-5" style="margin-left: -303px !important;">
                        <div class="row" role="menu">
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    PPE Link one
                                 </li>
                                 <li>
                                    PPE Link two
                                 </li>
                              </ul>
                           </div>
                           <div class="col-sm-6">
                              <ul class="multi-column-dropdown">
                                 <li>
                                    PPE Link one
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </ul>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
</html>

Объяснение: Я только что изменил поля, так как они могут быть отрицательными. Я также удалил ваш последний класс преобразования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...