Twitter Bootstrap Question posted in

How to make Twitter Bootstrap (Bootstrap 4 beta) menu dropdown on hover rather than click

How to make Twitter Bootstrap (Bootstrap 4 beta) menu dropdown on hover rather than click

PS: I need in an example a hover on a submenu dropdown
here is my code
I alm working on an angular project (angular 5) and bootstrap 4 beta 3

    <!-- Header -->

<div>
  <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-light justify-content-end" >

    <div class="{{config.containerType}}">
      <button
        class="navbar-toggler navbar-toggler-right btn"
        type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation" (click)="toggleCollapsed()">
        <span class="navbar-toggler-icon"></span>
      </button>
       <!--Logo-->
      <a *ngIf="config.logo" routerLink="{{config.logo.routerLink}}" class="navbar-brand">
        <img src="{{config.logo.src}}" alt="Image Description" class="img-fluid img-res" >
      </a>
       <!--End Logo-->
      <div id="navbarSupportedContent"  [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
        <ul *ngIf="config.menu.content" class="navbar-nav text-uppercase" >


          <li *ngFor="let item of config.menu.content" class="menu-item dropdown  ">
            <a >
                  <span dropdown (onShown)="onShown()"
                        (onHidden)="onHidden()"
                        (isOpenChange)="isOpenChange()">
  <a *ngIf="item.routerLink" href dropdownToggle (click)="false" [ngStyle]="item.style" routerLink="{{item.routerLink}}" routerLinkActive="menu-item-active ; selectSlider(item)">{{item.name}}</a>
      <a *ngIf="!item.routerLink" href dropdownToggle (click)="false" [ngStyle]="item.style">{{item.name}}</a>
                    <div *ngIf="item.submenu">
                            <ul *dropdownMenu class="dropdown-menu">
                              <li *ngFor="let choice of item.submenu">
                                <a [ngStyle]="choice.style" class="dropdown-item" routerLink="{{choice.routerLink}}">{{choice.name}}</a>
                              </li>
                            </ul>
                      </div>
                  </span>
            </a>

          </li>

        </ul>


      </div>

    </div>

  </nav>

</div>


<!-- End Header -->
Tags:

2

Answers


  1. 0

    Ng-Bootstrap

    Ng-Bootstrap dropdown has manual trigger option, it’s let you handle actions outside the instance.

    You can easily control dropdowns programmatically using the exported
    dropdown instance.

    <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary" id="dropdownManual" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownManual">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>

  <button class="btn btn-outline-success" (mouseenter)="$event.stopPropagation(); myDrop.open();">Open from outside</button>
  <button class="btn btn-outline-danger" (mouseleave)="$event.stopPropagation(); myDrop.close();">Close from outside</button>
</div>

    Ng-Bootstrap dropdown manual triggers

    Ngx-Bootstrap

    If you’re using Ngx-Bootstrap you can create a new boolean member in your component class for on/off toggling of the dropdown menu by mouseenter/mouseleave.

    Here is a quick example:

    demo.component.ts

    import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './app-demo.component.html'
})
export class DemoComponent {
  private toggle: boolean = false;

  openDropdown(): void {
    this.toggle = true;
  }

  closeDropdown(): void {
    this.toggle = false;
  }

  change(value: boolean): void {
    this.toggle = value;
  }
}

    demo.component.html

    <div class="btn-group" 
        dropdown 
        [isOpen]="toggle" 
        (mouseenter)="openDropmenu()"
        (mouseleave)="closeDropmenu()"
        (isOpenChange)="change($event)" 
        placement="top">
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

    Ngx-Bootstrap dropdown manual triggers

    Login or Signup to reply.
  2. 0

    If you are using Ngx-Bootstrap then the best solution is-

        <div class="btn-group" dropdown triggers="hover" 
  #dp="bs-dropdown" (mouseleave)="dp.hide()">
  <ul *dropdownMenu class="dropdown-menu" role="menu">

    The above options are part of the Ngx-Bootstrap library.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search