Bootstrap Snippet creative animated navigation 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
<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 ---------->
<div class="frame">
  <div class="center">
        <div class="menu-bar inactive">
            <div class="line-top"></div>
            <div class="yoda"></div>
            <div class="line-bottom"></div>
            <div class="vader"></div>
        </div>
        <div class="menu-items">
            <ul>
                <li>Live</li>
                <li>Work</li>
                <li>Create</li>
                <li>Deploy</li>
            </ul>
        </div>
  </div>
</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
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #ad5389;
  /* fallback for old browsers */
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3c1053, #ad5389);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.menu-bar {
  position: absolute;
  width: 50px;
  height: 25px;
  top: -25px;
  left: -25px;
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
// jQuery v3.3.1 is supported
lightsaber = document.querySelector('.menu-bar');
menu = document.querySelector('.menu-items');
lightsaber.addEventListener('click', function() {
    setTimeout(lightsaberToggle,200);
    menuToggle();
})
menu.addEventListener('click', function() {
    setTimeout(lightsaberToggle,200);
    menuToggle();
})
function lightsaberToggle() {
    if(lightsaber.classList.contains('inactive') === true) {
        lightsaber.classList.remove('inactive');
        lightsaber.classList.add('active');
    } else {
        lightsaber.classList.remove('active');
        lightsaber.classList.add('inactive');
    }
}
function menuToggle() {
    // if(!menu.classList.contains('active')) {
    //  menu.classList.add('active');
    // } else {
    //  menu.classList.remove('active');
    // }
    menu.classList.toggle('active');
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"creative animated navigation"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"creative animated navigation" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"creative animated navigation"
Bootstrap 4.1.1 Snippet by koshikojha