Bulma navbarは、ナビゲーションバーのドロップダウンメニューを開きます。どのようにナビバーの外でそれを開くのですか？

私はAngular 4でWebサイトを開発しています。私は設計が好きなので、開発プロセスの初期にBulma CSSフレームワークを使用することに決めました。 Bulmaにはドロップダウンメニュー用の組み込みコンポーネントがありませんので、自分で作成しようとして失敗した後にNgBootstrapを追加しました。Bulma navbarは、ナビゲーションバーのドロップダウンメニューを開きます。どのようにナビバーの外でそれを開くのですか？

私の問題は、Bulmaの組み込みのNavbarがNavbar内のメニューを開き、Verticleスクロールバーを使って表示していることです。 NavbarまたはメニューをNavの外で開くようにスタイルを設定するにはどうすればよいですか？

ここでは、英雄の上に配備されたウェブサイトです。テストはngbootstrapで、残りはscratch on-hoverメニューによって構築されます。 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: '\02795'; /* 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: "\2796"; /* 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: '\02795'; /* Unicode character for "plus" sign (+) */ 
    font-size: 13px; 
    color: #7a7a7a; 
    float: right; 
    margin-left: 5px; 
    } 
    .nav-left { 
    display: none; 
    } 

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

出典

2017-06-12 Jonathan Corrin

私は2つの変更を加えれば、動作することを確認しました。自分で試してみてください：

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

希望します。

出典

2017-06-12 20:25:42

これは私のために働いた。私はまた、別のアイテムを追加しようとしたと彼らは両方の作品。ありがとう！ –

@JonathanCorrin問題ありません！助けてうれしい！ :) –

Bulma navbarは、ナビゲーションバーのドロップダウンメニューを開きます。どのようにナビバーの外でそれを開くのですか？

答えて

関連する問題