Bootstrap Snippet CSS Grid Menu using HTML CSS Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<button type="button" class="menu-button js-menu-trigger" aria-label="Click to open menu"></button>
<div class="pen-title js-menu-trigger">
  <h1>Grid Menu</h1>
  <div class="info">Click here</div>
</div>
<div class="menu js-menu">
  <div class="menu__item">
    <div class="menu__item__bg-container"></div>
    <div class="menu__item__content">
      <a href="#" class="btn-link">Home</a>
    </div>
  </div>
  <div class="menu__item">
    <div class="menu__item__bg-container"></div>
    <div class="menu__item__content">
      <a href="#" class="btn-link">About</a>
    </div>
  </div>
  <div class="menu__item">
    <div class="menu__item__bg-container"></div>
    <div class="menu__item__content">
      <nav class="main-navigation">
        <a class="main-navigation__link" href="#">Lorem, ipsum.</a>
        <a class="main-navigation__link" href="#">Ipsum dolor.</a>
        <a class="main-navigation__link" href="#">amet consectetur.</a>
        <a class="main-navigation__link" href="#">voluptate provident</a>
      </nav>
    </div>
  </div>
  <div class="menu__item">
    <div class="menu__item__bg-container"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #1a1a1a url(https://picsum.photos/1920/1080?image=33) no-repeat center/cover;
  background-blend-mode: overlay;
}
.pen-title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  transition: all 300ms ease;
  z-index: 2;
  opacity: 1;
  transition-delay: 600ms;
  cursor: pointer;
  color: #fff;
  font-family: Helvetica, arial, sans-serif;
  text-align: center;
}
.pen-title .info {
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: bold;
  color: #ecf445;
}
.pen-title h1 {
  letter-spacing: 4px;
  margin: 2px auto;
  font-size: 18px;
}
.pen-title.menu-trigger--menu-open {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
const penTitle = document.querySelector('.pen-title');
const menu = document.querySelector('.js-menu');
const menuTrigger = document.querySelectorAll('.js-menu-trigger');
menuTrigger.forEach(btn => {
  btn.addEventListener('click', function() {
    menuTrigger.forEach(b => {
      b.classList.toggle('menu-trigger--menu-open');
    });
    menu.classList.toggle('menu--open');
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"CSS Grid Menu"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"CSS Grid Menu" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"CSS Grid Menu"
Bootstrap 4.1.1 Snippet by koshikojha