Bulma 导航栏在导航栏中打开下拉菜单。如何在导航栏之外打开它？

Question

我正在 Angular 开发一个网站 4. 我决定在开发过程的早期使用 Bulma CSS 框架，因为我喜欢这个设计。 Bulma 没有用于下拉菜单的内置组件，因此我在尝试创建自己的菜单失败后添加了 NgBootstrap。

我的问题是，Bulma 的内置导航栏在导航栏内打开菜单并通过垂直滚动条显示它。如何设计导航栏或菜单以在导航外部打开？

这里是部署在heroku上的网站，供大家查看。测试是 ngbootstrap，其余的都是通过 scratch 悬停菜单构建的。 http://atozinsurance.herokuapp.com/

这是我的 HTML 导航组件代码。

<nav class="nav has-shadow">
  <div class="nav-left">
    <a href="tel:+1-888-721-2511" class="nav-item" id="callNumber"><span class="fa fa-phone"></span>1-888-721-2511</a>
    <a class="nav-item">
      Ayuda en Español
    </a>
    <!--<a class="nav-item">-->
      <!--Companies We Offer-->
    <!--</a>-->
  </div>

  <div class="nav-center">
    <a class="nav-item" id="brand" routerLink="/">
      <img src="../../assets/a-z-logo.jpg" alt="A to Z Insurance logo">
    </a>
  </div>

  <span class="nav-toggle" (click)="toggleActive()" [ngClass]="{'is-active': isActive}">
    <span></span>
    <span></span>
    <span></span>
  </span>


  <div class="nav-right nav-menu" [ngClass]="{'is-active': isActive}">
    <a class="nav-item" (click)="toggleMobile('product')">
      <a class="menuTitle">Products</a>
      <aside class="menu insuranceMenu">
        <ul id="products" class="menu-list">
          <li><a routerLink="/auto-insurance"><p>Auto</p></a></li>
          <li><a routerLink="/home-insurance"><p>Home</p></a></li>
          <li><a routerLink="/life-insurance"><p>Life</p></a></li>
          <li><a routerLink="/health-insurance"><p>Health</p></a></li>
          <li><a routerLink="/financial-services">Financial</a></li>
          <li><a routerLink="/commercial-insurance"><p>Commercial</p></a></li>
          <li><a routerLink="/more-insurances"><p>More</p></a></li>
        </ul>
      </aside>
    </a>
    <div class="nav-item" id="mobileProductNav" [ngStyle]="{'display': mProductOpen ? 'block': 'none'}">
      <ul>
        <li><a routerLink="/auto-insurance">Auto</a></li>
        <li><a routerLink="/home-insurance">Home</a></li>
        <li><a routerLink="/life-insurance">Life</a></li>
        <li><a routerLink="/health-insurance">Health</a></li>
        <li><a routerLink="/financial-services">Financial</a></li>
        <li><a routerLink="/commercial-insurance">Commercial</a></li>
        <li><a routerLink="/more-insurances"><p>More</p></a></li>
      </ul>
    </div>
    <div ngbDropdown class="nav-item">
      <div ngbDropdownToggle id="dropDown1">Test</div>
      <div class="dropdown-menu" aria-labelledby="dropDown1">
        <button class="dropdown-item">Test item</button>
        <button class="dropdown-item">Test item</button>
        <button class="dropdown-item">Test item</button>
        <button class="dropdown-item">Test item</button>
      </div>
    </div>
    <a class="nav-item" id="financeTab" (click)="toggleMobile('finance')">
      <a class="menuTitle">Business</a>
      <aside class="menu financeMenu">
        <ul id="financial" class="menu-list">
          <li><a routerLink="/business-ein">EIN</a></li>
          <li><a routerLink="/business-llc">LLC</a></li>
          <li><a routerLink="/business-cards">Cards</a></li>
          <li><a routerLink="/business-s-corp">S-Corp</a></li>
          <li><a routerLink="/business-license">License</a></li>
          <li><a routerLink="/business-branding">Branding</a></li>
        </ul>
      </aside>
    </a>
    <div class="nav-item" id="mobileFinanceNav" [ngStyle]="{'display': mFinanceOpen ? 'block': 'none'}">
      <ul>
        <li><a routerLink="/business-ein">EIN</a></li>
        <li><a routerLink="/business-llc">LLC</a></li>
        <li><a routerLink="/business-cards">Cards</a></li>
        <li><a routerLink="/business-s-corp">S-Corp</a></li>
        <li><a routerLink="/business-license">License</a></li>
        <li><a routerLink="/business-branding">Branding</a></li>
      </ul>
    </div>
    <a class="nav-item" id="aboutTab" (click)="toggleMobile('about')">
      <a class="menuTitle">About</a>
      <aside class="menu aboutMenu">
        <ul id="about" class="menu-list">
          <li><a routerLink="/about">A to Z</a></li>
          <li><a routerLink="/blog">Blog</a></li>
          <li><a routerLink="/contact">Contact</a></li>
          <li><a routerLink="/locations">Location</a></li>
        </ul>
      </aside>
    </a>
    <div class="nav-item" id="mobileAboutNav" [ngStyle]="{'display': mAboutOpen ? 'block': 'none'}">
      <ul>
        <li><a routerLink="/about">A to Z</a></li>
        <li><a routerLink="/blog">Blog</a></li>
        <li><a routerLink="/contact">Contact</a></li>
        <li><a routerLink="/location">Location</a></li>
      </ul>
    </div>
  </div>
</nav>

这是我的 CSS，包括我从头开始制作移动响应式下拉菜单的失败尝试。

.nav {
  position: fixed;
  width: 100%;
  max-height: none!important;
  overflow-x: visible!important;
}

.nav-item {
  max-height: none!important;
  overflow-x: hidden!important;
}

.nav-right {
  max-height: none!important;
  overflow-x: hidden!important;
}

.nav-right {
  margin-right: 20px;
}

#callNumber {
  background-color: #252161;
  color: white;
  font-weight: bold;
  font-style: italic!important;
}

ul.nav-item li a {
  position: absolute;
}

ul.nav-item li a p {
  font-size: 13px!important;
}

.nav a:hover {
  background-color: #252161;
  color: white;
}

#brand:hover {
  background-color: white!important;
}

.dropdown-menu {
  position: absolute;
  background-color: white;
}

.d-inline-block {
  position: absolute;
}

aside.menu {
  width: 120px;
  z-index: 1000;
  position: fixed;
  background-color: white;
  color: #252161;
  top: 52px;
  display: none;
  transition: display 500ms ease;
}

@media (min-width: 769px) {
  .viewNav {
    display: none!important;
  }
  #mobileProductNav {
    display: none!important;
  }
  #mobileFinanceNav {
    display: none!important;
  }
  #mobileAboutNav {
    display: none!important;
  }
}


@media (max-width: 768px) {
  a.nav-item:hover > aside.menu {
    display: none!important;
  }
}

aside ul li a:hover {
  color: white!important;
  background-color: #252161!important;
}

a.nav-item:hover > aside.menu {
  display: block;
}

a.nav-item.accordion:after {
  content: '795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.viewNav {
  transition: max-height 5s ease-in!important;
  max-height: 400px!important;
  height: 100%!important;
  display: block!important;
}

a.accordion.active:after {
  content: "96"; /* Unicode character for "minus" sign (-) */
}


.insuranceMenu {
  display: none;
}

.aboutMenu {
  display: none;
  width: 115px!important;
}

.financeMenu {
  display: none;
  width: 160px!important;
}


@media (max-width: 1425px) {
  aside.menu {
    left: 89%;
  }
  aside.menu.aboutMenu {
    left: 92.5%;
  }
  aside.menu.financeMenu {
    left: 82%;
  }
}

@media (max-width: 1375px) {
  aside.menu {
    left: 81%;
  }
}

@media (max-width: 1350px) {
  aside.menu {
    left: 80%;
  }
  aside.menu.financeMenu {
    left: 81%;
  }
}

@media (max-width: 1325px) {
  aside.menu {
    left: 79%;
  }
  aside.menu.financeMenu {
    left: 80%;
  }
}

@media (max-width: 1300px) {
  aside.menu {
    left: 78%;
  }
}

@media (max-width: 1275px) {
  aside.menu {
    left: 77%;
  }
  aside.menu.financeMenu {
    left: 80%;
  }
}

@media (max-width: 1250px) {
  aside.menu {
    left: 76.5%;
  }
  aside.menu.financeMenu {
    left: 79.5%;
  }
}

@media (max-width: 1225px) {
  aside.menu {
    left: 76%;
  }
  aside.menu.financeMenu {
    left: 79%;
  }
}

@media (max-width: 1200px) {
  aside.menu {
    left: 75.5%;
  }
  aside.menu.financeMenu {
    left: 78.5%;
  }
}

@media (max-width: 1175px) {
  aside.menu {
    left: 75%;
  }
  aside.menu.financeMenu {
    left: 78%;
  }
}

@media (max-width: 1150px) {
  aside.menu {
    left: 74%;
  }
  aside.menu.financeMenu {
    left: 77.5%;
  }
}

@media (max-width: 1125px) {
  aside.menu {
    left: 73%;
  }
  aside.menu.aboutMenu {
    left: 91.5%;
  }
  aside.menu.financeMenu {
    left: 77%;
  }
}

@media (max-width: 1100px) {
  aside.menu {
    left: 72%;
  }
  aside.menu.financeMenu {
    left: 76.5%;
  }
}

@media (max-width: 1075px) {
  aside.menu {
    left: 71%;
  }
  aside.menu.financeMenu {
    left: 76%;
  }
}

@media (max-width: 1025px) {
  aside.menu {
    left: 70%;
  }
  aside.menu.financeMenu {
    left: 75.5%;
  }
}

@media (max-width: 1025px) {
  aside.menu {
    left: 69%;
  }
  aside.menu.aboutMenu {
    left: 90.5%;
  }
  aside.menu.financeMenu {
    left: 75%;
  }
}

@media (max-width: 1000px) {
  aside.menu {
    left: 68%;
  }
  aside.menu.financeMenu {
    left: 79%;
  }
}

@media (max-width: 975px) {
  aside.menu {
    left: 67%;
  }
  aside.menu.financeMenu {
    left: 75%;
  }
}

@media (max-width: 925px) {
  aside.menu {
    left: 64.5%;
  }
  aside.menu.financeMenu {
    left: 73%;
  }
}
@media (max-width: 875px) {
  aside.menu {
    left: 65.5%;
  }
  aside.menu.aboutMenu {
    left: 89%;
  }
  aside.menu.financeMenu {
    left: 71%;
  }
}

@media (max-width: 865px) {
  aside.menu {
    left: 65.5%;
  }

  aside.menu.financeMenu {
    left: 71%;
  }
}

@media (max-width: 850px) {
  aside.menu {
    left: 63%;
  }
  aside.menu.financeMenu {
    left: 72%;
  }
}

@media (max-width: 840px) {
  aside.menu {
    left: 64%;
  }
  aside.menu.financeMenu {
    left: 71%;
  }
}

@media (max-width: 825px) {
  aside.menu {
    left: 65%;
  }
  aside.menu.financeMenu {
    left: 74%;
  }
}

@media (max-width: 820px) {
  aside.menu {
    left: 65%;
  }
  aside.menu.financeMenu {
    left: 75%;
  }
}

@media (max-width: 810px) {
  aside.menu {
    left: 67%;
  }
  aside.menu.financeMenu {
    left: 76%;
  }
}

@media (max-width: 780px) {
  aside.menu {
    left: 67%;
  }
  aside.menu.financeMenu {
    left: 78%;
  }
}

@media (max-width: 768px) {
  aside.menu {
    display: none!important;
  }
  .nav-item a.menuTitle::after {
    content: '795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #7a7a7a;
    float: right;
    margin-left: 5px;
  }
  .nav-left {
    display: none;
  }

  .nav-right {
    margin-right: 0;
  }
}

Answer 1

我检查过，如果我进行两项更改，它会起作用。亲自尝试一下：

.nav-right.nav-menu {
    overflow-y: visible;
}
.nav-item[_ngcontent-c1], .nav-right[_ngcontent-c1] {
    overflow-x: visible !important;
}

希望对您有所帮助！

Bulma 导航栏在导航栏中打开下拉菜单。如何在导航栏之外打开它？

Bulma navbar opening dropdown menu in navbar. How do I open it outside of navbar?

css

overflow

twitter-bootstrap

bulma

angular