Bootstrap Snippet Randomly generated Pure CSS menu icons w/ markup and SCSS using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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='grid'></div>
<div class='panel'>
  <i class='fa fa-arrow-left close'></i>
  <h1>HTML</h1>
  <p class='markup'></p>
  <h2>CSS</h2>
  <p class='css'></p>
</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=Roboto+Condensed:700");
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
* {
  box-sizing: border-box;
}
.close {
  position: absolute;
  width: 100%;
  border-bottom: 1px solid #f6f6f6;
  padding: 17px;
  left: 0;
  top: 0;
  transition: all 0.3s;
  color: #54589c;
  cursor: pointer;
}
.close:hover {
  background: #f6f6f6;
}
body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'Roboto Condensed', sans-serif;
}
body.open .panel {
  right: 0;
}
body.open .grid {
  -webkit-transform: translateX(-450px);
          transform: translateX(-450px);
  opacity: 0.2;
  pointer-events: none;
}
body span {
  font-size: 10px;
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
// output css
const burgers = 180;
var index = 0;
function randomBetween(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
class Hamburger {
    constructor() {
        this.count = randomBetween(2, 3); // How many lines does the icon have
        this.height = randomBetween(2, 4);
        this.width = randomBetween(18, 26);
        this.originalWidth = this.width;
        this.borderRadius = randomBetween(0, this.height - 1);
        this.gap = randomBetween(1, 2);
        this.border = randomBetween(1, 2);
        this.opacity = randomBetween(100, 100) / 100;
        this.transitionSpeed = randomBetween(10, 30) / 100 + 's';
        this.rotation = randomBetween(0, 1) * 180;
        this.menuRotation = randomBetween(0, 1) * 180;
        this.scale = (randomBetween(0, 30) / 100) + 1;
        this.left = (-randomBetween(0, 20) + randomBetween(0, 20));
        this.easing = `cubic-bezier(${randomBetween(4, 8) / 10}, ${randomBetween(0, 1) / 10}, ${randomBetween(0, 4) / 10}, ${randomBetween(8, 20) / 10})`;
        this.type = randomBetween(1, 4)
        if(this.rotation > 179) {
            this.transitionSpeed = randomBetween(30, 60) / 100 + 's';
        }
        if(this.count == 3 && this.type == 2) {
            this.height += 2;
            this.width = this.height;
            this.borderRadius = this.height;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Randomly generated Pure CSS menu icons w/ markup and SCSS"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Randomly generated Pure CSS menu icons w/ markup and SCSS" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Randomly generated Pure CSS menu icons w/ markup and SCSS"
Bootstrap 4.1.1 Snippet by koshikojha