bootstrap-mega-menu/dropdown-on-hover.html at main · mdbootstrap/bootstrap-mega-menu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Material Design for Bootstrap</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
  <!-- MDB -->
  <link rel="stylesheet" href="css/bootstrap-mega-menu.min.css" />
</head>

<body>

  <!-- Start your project here-->
  <style>
    .dropdown-hover:hover>.dropdown-menu {
      display: inline-block;
    }

    .dropdown-hover>.dropdown-toggle:active {
      /*Without this, clicking will make it sticky*/
      pointer-events: none;
    }
  </style>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- Container wrapper -->
    <div class="container-fluid">
      <!-- Toggle button -->
      <button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"
        data-mdb-target="#navbarExampleOnHover" aria-controls="navbarExampleOnHover" aria-expanded="false"
        aria-label="Toggle navigation">
        <i class="fas fa-bars"></i>
      </button>

      <!-- Collapsible wrapper -->
      <div class="collapse navbar-collapse" id="navbarExampleOnHover">
        <!-- Left links -->
        <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
          <li class="nav-item">
            <a class="nav-link" href="#">Regular link</a>
          </li>
          <!-- Navbar dropdown -->
          <li class="nav-item dropdown dropdown-hover position-static">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
              data-mdb-toggle="dropdown" aria-expanded="false">
              Mega menu
            </a>
            <!-- Dropdown menu -->
            <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="border-top-left-radius: 0;
                    border-top-right-radius: 0;
                  ">

              <div class="container">
                <div class="row my-4">
                  <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                    <div class="list-group list-group-flush">
                      <a href="" class="list-group-item list-group-item-action">Lorem ipsum</a>
                      <a href="" class="list-group-item list-group-item-action">Dolor sit</a>
                      <a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
                      <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                      <a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
                    </div>
                  </div>
                  <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                    <div class="list-group list-group-flush">
                      <a href="" class="list-group-item list-group-item-action">Explicabo voluptas</a>
                      <a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
                      <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                      <a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
                      <a href="" class="list-group-item list-group-item-action">Provident dolor</a>
                    </div>
                  </div>
                  <div class="col-md-6 col-lg-3 mb-3 mb-md-0">
                    <div class="list-group list-group-flush">
                      <a href="" class="list-group-item list-group-item-action">Iste quaerato</a>
                      <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                      <a href="" class="list-group-item list-group-item-action">Est iure</a>
                      <a href="" class="list-group-item list-group-item-action">Praesentium</a>
                      <a href="" class="list-group-item list-group-item-action">Laboriosam</a>
                    </div>
                  </div>
                  <div class="col-md-6 col-lg-3">
                    <div class="list-group list-group-flush">
                      <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                      <a href="" class="list-group-item list-group-item-action">Saepe</a>
                      <a href="" class="list-group-item list-group-item-action">Vel alias</a>
                      <a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
                      <a href="" class="list-group-item list-group-item-action">Cum dolores</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- Left links -->
      </div>
      <!-- Collapsible wrapper -->
    </div>
    <!-- Container wrapper -->
  </nav>
  <!-- End your project here-->

  <!-- MDB -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Custom scripts -->
  <script type="text/javascript"></script>
</body>

</html>