Добавление соответствующих выпадающих элементов в Bootstrap navbar - PullRequest
Новая
       21

Добавление соответствующих выпадающих элементов в Bootstrap navbar

0 голосов
/ 31 января 2020

Я использую это Анимированный Bootstrap Выпадающий список Navbar с начала bootstrap .com, но когда я пытаюсь добавить опцию дополнительного меню ie. "Интересы" с выпадающими пунктами "Спорт" и «Путешествие», раскрывающееся меню «Биографическая справка» выглядит так, как будто пользователь выбрал его вместо интересов. Я считаю, что это может быть что-то не так с моим расположением кода, но я новичок в Bootstrap, поэтому любые советы и помощь будут высоко оценены. 

/* Change this breakpoint if you change the breakpoint of the navbar */

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

/* Other styles for the page not related to the animated dropdown */

body {
  background: #007bff;
  background: linear-gradient(to right, #0062E6, #33AEFF);
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Síofra Kelleher</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Curriculum Vitae
        </a>
        <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">About Me</a>
            <a class="dropdown-item" href="#">Experience</a>
            <a class="dropdown-item" href="#">Education</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Contact Me</a>
          </div>
          
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          My Interests
        </a>
          <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Sports</a>
            <a class="dropdown-item" href="#">Travel</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Contact Me</a>
          </div>
        
          <!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
          
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container text-center">
  <h1 class="mt-5 text-white font-weight-light">Síofra Kelleher's IS1113 Web Development Project</h1>
  <p class="lead text-white-50">Insert some pretty words here</p>
</div>

1 Ответ

0 голосов
/ 02 февраля 2020

поместите второй выпадающий список в отдельный тег li: 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Síofra Kelleher</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Curriculum Vitae
                    </a>
                    <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown1">
                        <a class="dropdown-item" href="#">About Me</a>
                        <a class="dropdown-item" href="#">Experience</a>
                        <a class="dropdown-item" href="#">Education</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Contact Me</a>
                    </div>



                    <!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->

                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        My Interests
                    </a>
                    <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown2">
                        <a class="dropdown-item" href="#">Sports</a>
                        <a class="dropdown-item" href="#">Travel</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Contact Me</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
...