web-dev-qa-db-ja.com

Bootstrap 4.1でホバーでドロップダウンサブメニューを作成する方法？

Bootstrap 4.1 でホバー時にドロップダウンサブメニューを作成したいWebサイトで作業しています

ホバーでドロップダウンメニューを作成するために使用したHTMLコードは次のとおりです。

<div class="navbar-collapse text-center" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      main menu
    </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">A</a>
        <a class="dropdown-item" href="#">B</a>
        <a class="dropdown-item" href="#">C</a>
        <a class="dropdown-item" href="#">D</a>
      </div>
    </li>

    <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>

  </ul>
</div>



問題ステートメント：

Dのホバー;ドロップダウン項目E、F、G、Hが表示されます。

htmlcsshoverbootstrap-4
8
flash

これはあなたを助けるかもしれません.....

.dropdown:hover>.dropdown-menu {
  display: block;
}
.dropdown-item:hover>.dropdown-menu {
  display: block;
}
ul li{
list-style-type:none;
display: inline;
}

.navbar-nav .nav-link{display:inline-block;}
   
.ml-auto {display:inline-block!important;}

.dropdown>.dropdown-toggle:active {
  pointer-events: none;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

  <title>Dropdown submenu on hover</title>
</head>

<body>

  <div class="navbar-collapse text-center" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Main menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">A</a>
          <a class="dropdown-item" href="#">B</a>
          <a class="dropdown-item" href="#">C</a>
          <a class="dropdown-item nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          D
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">E</a>
          <a class="dropdown-item" href="#">F</a>
          <a class="dropdown-item" href="#">G</a>
          <a class="dropdown-item" href="#">H</a>
        </div>
        </div>
      </li>
    </ul>
  </div>

  <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0ALU++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>

</html>
11
Viira

このcodepenリンクにはあなたの答えがあります： link

基本的にこのような構造を作成します

<li>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">D <b class="caret"></b></a>
    <ul class="dropdown-menu multi-level">
        <li><a href="#">E</a></li>
        <li><a href="#">F</a></li>
        <li><a href="#">G</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">H</a>
            <ul class="dropdown-menu">
                <li><a href="#">I</a></li>
                <li><a href="#">J</a></li>
                <li><a href="#">K</a></li>
            </ul>
        </li>
    </ul>
</li>

コードペンで完全なコードを書いたので、この回答の上記のチェックアウトリンクを参照してください。

10
krupesh Anadkat

あなただけのCSSを追加する必要があります。

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  pointer-events: none;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

  <title>Dropdown submenu on hover</title>
</head>

<body>

  <div class="navbar-collapse text-center" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          main menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">A</a>
          <a class="dropdown-item" href="#">B</a>
          <a class="dropdown-item" href="#">C</a>
          <a class="dropdown-item" href="#">D</a>
        </div>
      </li>
      <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
    </ul>
  </div>

  <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0ALU++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>

</html>
6
Pasindu Madhuranga
  1. 最初に、新しいCSSファイルを作成し、好きな名前を付けます。私の場合、ファイルの名前は「my_own.css」です。

  2. Bootstrapへのリンクの後にページにリンクします。したがって、これまでのところ、次のようなものがあります。

    <link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="my_own.css">
  3. カスタムのcssファイルに次のビットを追加し、元のbootstrap=の場合に再び置き換えられるため、元のbootstrap=更新。
li.dropdown:hover > .dropdown-menu {
    display: block;
}
1
H. M.