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

<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>
@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; opacity: 0.1; position: absolute; top: 20px; left: 20px; } .grid_alt { background: #2a3648; } .grid_alt span { color: white; } .grid_alt .grid_item:hover { background: #293340; } .grid_alt .menu_part { background: white !important; } .panel { overflow-y: scroll; width: 450px; border-left: 1px solid whitesmoke; position: fixed; padding: 100px 60px 60px 60px; background: white; right: -450px; height: 100vh; top: 0; transition: all 0.3s; } .panel h1, .panel h2 { margin: 0; font-size: 16px; } .panel h2 { margin-top: 30px; } .panel p { white-space: pre; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; font-family: 'Source Code Pro', monospace; font-size: 9px; font-weight: 100; line-height: 14px; } .grid, .grid_alt { transition: all 0.3s; overflow: hidden; width: 100vw; margin: 0 auto; padding: 100px; } .grid_item, .grid_alt_item { width: 8.3333vw; height: 8.3333vw; float: left; position: relative; transition: all 0.5s; overflow: hidden; } @media only screen and (max-width: 1200px) { .grid_item, .grid_alt_item { width: 20vw; height: 20vw; } } @media only screen and (max-width: 700px) { .grid_item, .grid_alt_item { width: 25vw; height: 25vw; } } @media only screen and (max-width: 400px) { .grid_item, .grid_alt_item { width: 50vw; height: 50vw; } } .grid_item:hover i, .grid_alt_item:hover i { bottom: 20px; } .grid_item i, .grid_alt_item i { opacity: 0.1; position: absolute; right: 20px; bottom: -20px; transition: all 0.3s; cursor: pointer; font-size: 12px; } .grid_item i:hover, .grid_alt_item i:hover { opacity: 1; } .grid_item:hover, .grid_alt_item:hover { background: #f7f7f7; } .grid_item:nth-of-type(1), .grid_alt_item:nth-of-type(1) { opacity: 0; -webkit-animation: fadeIn 1s 0.0285714286s forwards; animation: fadeIn 1s 0.0285714286s forwards; } .grid_item:nth-of-type(2), .grid_alt_item:nth-of-type(2) { opacity: 0; -webkit-animation: fadeIn 1s 0.0571428571s forwards; animation: fadeIn 1s 0.0571428571s forwards; } .grid_item:nth-of-type(3), .grid_alt_item:nth-of-type(3) { opacity: 0; -webkit-animation: fadeIn 1s 0.0857142857s forwards; animation: fadeIn 1s 0.0857142857s forwards; } .grid_item:nth-of-type(4), .grid_alt_item:nth-of-type(4) { opacity: 0; -webkit-animation: fadeIn 1s 0.1142857143s forwards; animation: fadeIn 1s 0.1142857143s forwards; } .grid_item:nth-of-type(5), .grid_alt_item:nth-of-type(5) { opacity: 0; -webkit-animation: fadeIn 1s 0.1428571429s forwards; animation: fadeIn 1s 0.1428571429s forwards; } .grid_item:nth-of-type(6), .grid_alt_item:nth-of-type(6) { opacity: 0; -webkit-animation: fadeIn 1s 0.1714285714s forwards; animation: fadeIn 1s 0.1714285714s forwards; } .grid_item:nth-of-type(7), .grid_alt_item:nth-of-type(7) { opacity: 0; -webkit-animation: fadeIn 1s 0.2s forwards; animation: fadeIn 1s 0.2s forwards; } .grid_item:nth-of-type(8), .grid_alt_item:nth-of-type(8) { opacity: 0; -webkit-animation: fadeIn 1s 0.2285714286s forwards; animation: fadeIn 1s 0.2285714286s forwards; } .grid_item:nth-of-type(9), .grid_alt_item:nth-of-type(9) { opacity: 0; -webkit-animation: fadeIn 1s 0.2571428571s forwards; animation: fadeIn 1s 0.2571428571s forwards; } .grid_item:nth-of-type(10), .grid_alt_item:nth-of-type(10) { opacity: 0; -webkit-animation: fadeIn 1s 0.2857142857s forwards; animation: fadeIn 1s 0.2857142857s forwards; } .grid_item:nth-of-type(11), .grid_alt_item:nth-of-type(11) { opacity: 0; -webkit-animation: fadeIn 1s 0.3142857143s forwards; animation: fadeIn 1s 0.3142857143s forwards; } .grid_item:nth-of-type(12), .grid_alt_item:nth-of-type(12) { opacity: 0; -webkit-animation: fadeIn 1s 0.3428571429s forwards; animation: fadeIn 1s 0.3428571429s forwards; } .grid_item:nth-of-type(13), .grid_alt_item:nth-of-type(13) { opacity: 0; -webkit-animation: fadeIn 1s 0.3714285714s forwards; animation: fadeIn 1s 0.3714285714s forwards; } .grid_item:nth-of-type(14), .grid_alt_item:nth-of-type(14) { opacity: 0; -webkit-animation: fadeIn 1s 0.4s forwards; animation: fadeIn 1s 0.4s forwards; } .grid_item:nth-of-type(15), .grid_alt_item:nth-of-type(15) { opacity: 0; -webkit-animation: fadeIn 1s 0.4285714286s forwards; animation: fadeIn 1s 0.4285714286s forwards; } .grid_item:nth-of-type(16), .grid_alt_item:nth-of-type(16) { opacity: 0; -webkit-animation: fadeIn 1s 0.4571428571s forwards; animation: fadeIn 1s 0.4571428571s forwards; } .grid_item:nth-of-type(17), .grid_alt_item:nth-of-type(17) { opacity: 0; -webkit-animation: fadeIn 1s 0.4857142857s forwards; animation: fadeIn 1s 0.4857142857s forwards; } .grid_item:nth-of-type(18), .grid_alt_item:nth-of-type(18) { opacity: 0; -webkit-animation: fadeIn 1s 0.5142857143s forwards; animation: fadeIn 1s 0.5142857143s forwards; } .grid_item:nth-of-type(19), .grid_alt_item:nth-of-type(19) { opacity: 0; -webkit-animation: fadeIn 1s 0.5428571429s forwards; animation: fadeIn 1s 0.5428571429s forwards; } .grid_item:nth-of-type(20), .grid_alt_item:nth-of-type(20) { opacity: 0; -webkit-animation: fadeIn 1s 0.5714285714s forwards; animation: fadeIn 1s 0.5714285714s forwards; } .grid_item:nth-of-type(21), .grid_alt_item:nth-of-type(21) { opacity: 0; -webkit-animation: fadeIn 1s 0.6s forwards; animation: fadeIn 1s 0.6s forwards; } .grid_item:nth-of-type(22), .grid_alt_item:nth-of-type(22) { opacity: 0; -webkit-animation: fadeIn 1s 0.6285714286s forwards; animation: fadeIn 1s 0.6285714286s forwards; } .grid_item:nth-of-type(23), .grid_alt_item:nth-of-type(23) { opacity: 0; -webkit-animation: fadeIn 1s 0.6571428571s forwards; animation: fadeIn 1s 0.6571428571s forwards; } .grid_item:nth-of-type(24), .grid_alt_item:nth-of-type(24) { opacity: 0; -webkit-animation: fadeIn 1s 0.6857142857s forwards; animation: fadeIn 1s 0.6857142857s forwards; } .grid_item:nth-of-type(25), .grid_alt_item:nth-of-type(25) { opacity: 0; -webkit-animation: fadeIn 1s 0.7142857143s forwards; animation: fadeIn 1s 0.7142857143s forwards; } .grid_item:nth-of-type(26), .grid_alt_item:nth-of-type(26) { opacity: 0; -webkit-animation: fadeIn 1s 0.7428571429s forwards; animation: fadeIn 1s 0.7428571429s forwards; } .grid_item:nth-of-type(27), .grid_alt_item:nth-of-type(27) { opacity: 0; -webkit-animation: fadeIn 1s 0.7714285714s forwards; animation: fadeIn 1s 0.7714285714s forwards; } .grid_item:nth-of-type(28), .grid_alt_item:nth-of-type(28) { opacity: 0; -webkit-animation: fadeIn 1s 0.8s forwards; animation: fadeIn 1s 0.8s forwards; } .grid_item:nth-of-type(29), .grid_alt_item:nth-of-type(29) { opacity: 0; -webkit-animation: fadeIn 1s 0.8285714286s forwards; animation: fadeIn 1s 0.8285714286s forwards; } .grid_item:nth-of-type(30), .grid_alt_item:nth-of-type(30) { opacity: 0; -webkit-animation: fadeIn 1s 0.8571428571s forwards; animation: fadeIn 1s 0.8571428571s forwards; } .grid_item:nth-of-type(31), .grid_alt_item:nth-of-type(31) { opacity: 0; -webkit-animation: fadeIn 1s 0.8857142857s forwards; animation: fadeIn 1s 0.8857142857s forwards; } .grid_item:nth-of-type(32), .grid_alt_item:nth-of-type(32) { opacity: 0; -webkit-animation: fadeIn 1s 0.9142857143s forwards; animation: fadeIn 1s 0.9142857143s forwards; } .grid_item:nth-of-type(33), .grid_alt_item:nth-of-type(33) { opacity: 0; -webkit-animation: fadeIn 1s 0.9428571429s forwards; animation: fadeIn 1s 0.9428571429s forwards; } .grid_item:nth-of-type(34), .grid_alt_item:nth-of-type(34) { opacity: 0; -webkit-animation: fadeIn 1s 0.9714285714s forwards; animation: fadeIn 1s 0.9714285714s forwards; } .grid_item:nth-of-type(35), .grid_alt_item:nth-of-type(35) { opacity: 0; -webkit-animation: fadeIn 1s 1s forwards; animation: fadeIn 1s 1s forwards; } .grid_item:nth-of-type(36), .grid_alt_item:nth-of-type(36) { opacity: 0; -webkit-animation: fadeIn 1s 1.0285714286s forwards; animation: fadeIn 1s 1.0285714286s forwards; } .grid_item:nth-of-type(37), .grid_alt_item:nth-of-type(37) { opacity: 0; -webkit-animation: fadeIn 1s 1.0571428571s forwards; animation: fadeIn 1s 1.0571428571s forwards; } .grid_item:nth-of-type(38), .grid_alt_item:nth-of-type(38) { opacity: 0; -webkit-animation: fadeIn 1s 1.0857142857s forwards; animation: fadeIn 1s 1.0857142857s forwards; } .grid_item:nth-of-type(39), .grid_alt_item:nth-of-type(39) { opacity: 0; -webkit-animation: fadeIn 1s 1.1142857143s forwards; animation: fadeIn 1s 1.1142857143s forwards; } .grid_item:nth-of-type(40), .grid_alt_item:nth-of-type(40) { opacity: 0; -webkit-animation: fadeIn 1s 1.1428571429s forwards; animation: fadeIn 1s 1.1428571429s forwards; } .grid_item:nth-of-type(41), .grid_alt_item:nth-of-type(41) { opacity: 0; -webkit-animation: fadeIn 1s 1.1714285714s forwards; animation: fadeIn 1s 1.1714285714s forwards; } .grid_item:nth-of-type(42), .grid_alt_item:nth-of-type(42) { opacity: 0; -webkit-animation: fadeIn 1s 1.2s forwards; animation: fadeIn 1s 1.2s forwards; } .grid_item:nth-of-type(43), .grid_alt_item:nth-of-type(43) { opacity: 0; -webkit-animation: fadeIn 1s 1.2285714286s forwards; animation: fadeIn 1s 1.2285714286s forwards; } .grid_item:nth-of-type(44), .grid_alt_item:nth-of-type(44) { opacity: 0; -webkit-animation: fadeIn 1s 1.2571428571s forwards; animation: fadeIn 1s 1.2571428571s forwards; } .grid_item:nth-of-type(45), .grid_alt_item:nth-of-type(45) { opacity: 0; -webkit-animation: fadeIn 1s 1.2857142857s forwards; animation: fadeIn 1s 1.2857142857s forwards; } .grid_item:nth-of-type(46), .grid_alt_item:nth-of-type(46) { opacity: 0; -webkit-animation: fadeIn 1s 1.3142857143s forwards; animation: fadeIn 1s 1.3142857143s forwards; } .grid_item:nth-of-type(47), .grid_alt_item:nth-of-type(47) { opacity: 0; -webkit-animation: fadeIn 1s 1.3428571429s forwards; animation: fadeIn 1s 1.3428571429s forwards; } .grid_item:nth-of-type(48), .grid_alt_item:nth-of-type(48) { opacity: 0; -webkit-animation: fadeIn 1s 1.3714285714s forwards; animation: fadeIn 1s 1.3714285714s forwards; } .grid_item:nth-of-type(49), .grid_alt_item:nth-of-type(49) { opacity: 0; -webkit-animation: fadeIn 1s 1.4s forwards; animation: fadeIn 1s 1.4s forwards; } .grid_item:nth-of-type(50), .grid_alt_item:nth-of-type(50) { opacity: 0; -webkit-animation: fadeIn 1s 1.4285714286s forwards; animation: fadeIn 1s 1.4285714286s forwards; } .grid_item:nth-of-type(51), .grid_alt_item:nth-of-type(51) { opacity: 0; -webkit-animation: fadeIn 1s 1.4571428571s forwards; animation: fadeIn 1s 1.4571428571s forwards; } .grid_item:nth-of-type(52), .grid_alt_item:nth-of-type(52) { opacity: 0; -webkit-animation: fadeIn 1s 1.4857142857s forwards; animation: fadeIn 1s 1.4857142857s forwards; } .grid_item:nth-of-type(53), .grid_alt_item:nth-of-type(53) { opacity: 0; -webkit-animation: fadeIn 1s 1.5142857143s forwards; animation: fadeIn 1s 1.5142857143s forwards; } .grid_item:nth-of-type(54), .grid_alt_item:nth-of-type(54) { opacity: 0; -webkit-animation: fadeIn 1s 1.5428571429s forwards; animation: fadeIn 1s 1.5428571429s forwards; } .grid_item:nth-of-type(55), .grid_alt_item:nth-of-type(55) { opacity: 0; -webkit-animation: fadeIn 1s 1.5714285714s forwards; animation: fadeIn 1s 1.5714285714s forwards; } .grid_item:nth-of-type(56), .grid_alt_item:nth-of-type(56) { opacity: 0; -webkit-animation: fadeIn 1s 1.6s forwards; animation: fadeIn 1s 1.6s forwards; } .grid_item:nth-of-type(57), .grid_alt_item:nth-of-type(57) { opacity: 0; -webkit-animation: fadeIn 1s 1.6285714286s forwards; animation: fadeIn 1s 1.6285714286s forwards; } .grid_item:nth-of-type(58), .grid_alt_item:nth-of-type(58) { opacity: 0; -webkit-animation: fadeIn 1s 1.6571428571s forwards; animation: fadeIn 1s 1.6571428571s forwards; } .grid_item:nth-of-type(59), .grid_alt_item:nth-of-type(59) { opacity: 0; -webkit-animation: fadeIn 1s 1.6857142857s forwards; animation: fadeIn 1s 1.6857142857s forwards; } .grid_item:nth-of-type(60), .grid_alt_item:nth-of-type(60) { opacity: 0; -webkit-animation: fadeIn 1s 1.7142857143s forwards; animation: fadeIn 1s 1.7142857143s forwards; } .grid_item:nth-of-type(61), .grid_alt_item:nth-of-type(61) { opacity: 0; -webkit-animation: fadeIn 1s 1.7428571429s forwards; animation: fadeIn 1s 1.7428571429s forwards; } .grid_item:nth-of-type(62), .grid_alt_item:nth-of-type(62) { opacity: 0; -webkit-animation: fadeIn 1s 1.7714285714s forwards; animation: fadeIn 1s 1.7714285714s forwards; } .grid_item:nth-of-type(63), .grid_alt_item:nth-of-type(63) { opacity: 0; -webkit-animation: fadeIn 1s 1.8s forwards; animation: fadeIn 1s 1.8s forwards; } .grid_item:nth-of-type(64), .grid_alt_item:nth-of-type(64) { opacity: 0; -webkit-animation: fadeIn 1s 1.8285714286s forwards; animation: fadeIn 1s 1.8285714286s forwards; } .grid_item:nth-of-type(65), .grid_alt_item:nth-of-type(65) { opacity: 0; -webkit-animation: fadeIn 1s 1.8571428571s forwards; animation: fadeIn 1s 1.8571428571s forwards; } .grid_item:nth-of-type(66), .grid_alt_item:nth-of-type(66) { opacity: 0; -webkit-animation: fadeIn 1s 1.8857142857s forwards; animation: fadeIn 1s 1.8857142857s forwards; } .grid_item:nth-of-type(67), .grid_alt_item:nth-of-type(67) { opacity: 0; -webkit-animation: fadeIn 1s 1.9142857143s forwards; animation: fadeIn 1s 1.9142857143s forwards; } .grid_item:nth-of-type(68), .grid_alt_item:nth-of-type(68) { opacity: 0; -webkit-animation: fadeIn 1s 1.9428571429s forwards; animation: fadeIn 1s 1.9428571429s forwards; } .grid_item:nth-of-type(69), .grid_alt_item:nth-of-type(69) { opacity: 0; -webkit-animation: fadeIn 1s 1.9714285714s forwards; animation: fadeIn 1s 1.9714285714s forwards; } .grid_item:nth-of-type(70), .grid_alt_item:nth-of-type(70) { opacity: 0; -webkit-animation: fadeIn 1s 2s forwards; animation: fadeIn 1s 2s forwards; } .grid_item:nth-of-type(71), .grid_alt_item:nth-of-type(71) { opacity: 0; -webkit-animation: fadeIn 1s 2.0285714286s forwards; animation: fadeIn 1s 2.0285714286s forwards; } .grid_item:nth-of-type(72), .grid_alt_item:nth-of-type(72) { opacity: 0; -webkit-animation: fadeIn 1s 2.0571428571s forwards; animation: fadeIn 1s 2.0571428571s forwards; } .grid_item:nth-of-type(73), .grid_alt_item:nth-of-type(73) { opacity: 0; -webkit-animation: fadeIn 1s 2.0857142857s forwards; animation: fadeIn 1s 2.0857142857s forwards; } .grid_item:nth-of-type(74), .grid_alt_item:nth-of-type(74) { opacity: 0; -webkit-animation: fadeIn 1s 2.1142857143s forwards; animation: fadeIn 1s 2.1142857143s forwards; } .grid_item:nth-of-type(75), .grid_alt_item:nth-of-type(75) { opacity: 0; -webkit-animation: fadeIn 1s 2.1428571429s forwards; animation: fadeIn 1s 2.1428571429s forwards; } .grid_item:nth-of-type(76), .grid_alt_item:nth-of-type(76) { opacity: 0; -webkit-animation: fadeIn 1s 2.1714285714s forwards; animation: fadeIn 1s 2.1714285714s forwards; } .grid_item:nth-of-type(77), .grid_alt_item:nth-of-type(77) { opacity: 0; -webkit-animation: fadeIn 1s 2.2s forwards; animation: fadeIn 1s 2.2s forwards; } .grid_item:nth-of-type(78), .grid_alt_item:nth-of-type(78) { opacity: 0; -webkit-animation: fadeIn 1s 2.2285714286s forwards; animation: fadeIn 1s 2.2285714286s forwards; } .grid_item:nth-of-type(79), .grid_alt_item:nth-of-type(79) { opacity: 0; -webkit-animation: fadeIn 1s 2.2571428571s forwards; animation: fadeIn 1s 2.2571428571s forwards; } .grid_item:nth-of-type(80), .grid_alt_item:nth-of-type(80) { opacity: 0; -webkit-animation: fadeIn 1s 2.2857142857s forwards; animation: fadeIn 1s 2.2857142857s forwards; } .grid_item:nth-of-type(81), .grid_alt_item:nth-of-type(81) { opacity: 0; -webkit-animation: fadeIn 1s 2.3142857143s forwards; animation: fadeIn 1s 2.3142857143s forwards; } .grid_item:nth-of-type(82), .grid_alt_item:nth-of-type(82) { opacity: 0; -webkit-animation: fadeIn 1s 2.3428571429s forwards; animation: fadeIn 1s 2.3428571429s forwards; } .grid_item:nth-of-type(83), .grid_alt_item:nth-of-type(83) { opacity: 0; -webkit-animation: fadeIn 1s 2.3714285714s forwards; animation: fadeIn 1s 2.3714285714s forwards; } .grid_item:nth-of-type(84), .grid_alt_item:nth-of-type(84) { opacity: 0; -webkit-animation: fadeIn 1s 2.4s forwards; animation: fadeIn 1s 2.4s forwards; } .grid_item:nth-of-type(85), .grid_alt_item:nth-of-type(85) { opacity: 0; -webkit-animation: fadeIn 1s 2.4285714286s forwards; animation: fadeIn 1s 2.4285714286s forwards; } .grid_item:nth-of-type(86), .grid_alt_item:nth-of-type(86) { opacity: 0; -webkit-animation: fadeIn 1s 2.4571428571s forwards; animation: fadeIn 1s 2.4571428571s forwards; } .grid_item:nth-of-type(87), .grid_alt_item:nth-of-type(87) { opacity: 0; -webkit-animation: fadeIn 1s 2.4857142857s forwards; animation: fadeIn 1s 2.4857142857s forwards; } .grid_item:nth-of-type(88), .grid_alt_item:nth-of-type(88) { opacity: 0; -webkit-animation: fadeIn 1s 2.5142857143s forwards; animation: fadeIn 1s 2.5142857143s forwards; } .grid_item:nth-of-type(89), .grid_alt_item:nth-of-type(89) { opacity: 0; -webkit-animation: fadeIn 1s 2.5428571429s forwards; animation: fadeIn 1s 2.5428571429s forwards; } .grid_item:nth-of-type(90), .grid_alt_item:nth-of-type(90) { opacity: 0; -webkit-animation: fadeIn 1s 2.5714285714s forwards; animation: fadeIn 1s 2.5714285714s forwards; } .grid_item:nth-of-type(91), .grid_alt_item:nth-of-type(91) { opacity: 0; -webkit-animation: fadeIn 1s 2.6s forwards; animation: fadeIn 1s 2.6s forwards; } .grid_item:nth-of-type(92), .grid_alt_item:nth-of-type(92) { opacity: 0; -webkit-animation: fadeIn 1s 2.6285714286s forwards; animation: fadeIn 1s 2.6285714286s forwards; } .grid_item:nth-of-type(93), .grid_alt_item:nth-of-type(93) { opacity: 0; -webkit-animation: fadeIn 1s 2.6571428571s forwards; animation: fadeIn 1s 2.6571428571s forwards; } .grid_item:nth-of-type(94), .grid_alt_item:nth-of-type(94) { opacity: 0; -webkit-animation: fadeIn 1s 2.6857142857s forwards; animation: fadeIn 1s 2.6857142857s forwards; } .grid_item:nth-of-type(95), .grid_alt_item:nth-of-type(95) { opacity: 0; -webkit-animation: fadeIn 1s 2.7142857143s forwards; animation: fadeIn 1s 2.7142857143s forwards; } .grid_item:nth-of-type(96), .grid_alt_item:nth-of-type(96) { opacity: 0; -webkit-animation: fadeIn 1s 2.7428571429s forwards; animation: fadeIn 1s 2.7428571429s forwards; } .grid_item:nth-of-type(97), .grid_alt_item:nth-of-type(97) { opacity: 0; -webkit-animation: fadeIn 1s 2.7714285714s forwards; animation: fadeIn 1s 2.7714285714s forwards; } .grid_item:nth-of-type(98), .grid_alt_item:nth-of-type(98) { opacity: 0; -webkit-animation: fadeIn 1s 2.8s forwards; animation: fadeIn 1s 2.8s forwards; } .grid_item:nth-of-type(99), .grid_alt_item:nth-of-type(99) { opacity: 0; -webkit-animation: fadeIn 1s 2.8285714286s forwards; animation: fadeIn 1s 2.8285714286s forwards; } .grid_item:nth-of-type(100), .grid_alt_item:nth-of-type(100) { opacity: 0; -webkit-animation: fadeIn 1s 2.8571428571s forwards; animation: fadeIn 1s 2.8571428571s forwards; } .grid_item__inner, .grid_alt_item__inner { position: absolute; left: 0; right: 0; margin: auto; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); text-align: center; } .grid_item__inner .menu:hover, .grid_alt_item__inner .menu:hover { opacity: 1 !important; } @-webkit-keyframes fadeIn { to { opacity: 1; } } @keyframes fadeIn { to { opacity: 1; } }
// 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; this.gap += 1; } let partStyles = ` width: ${this.width}px; height: ${this.height}px; position: absolute; background: #313d44; right: 0; margin: auto; left: 0; border-radius: ${this.borderRadius}px; transition: all ${this.transitionSpeed} ${this.easing}; `; let checkedStyle = ''; let center = (((this.count * this.height) + ((this.count - 1) * this.gap)) / 2) - (this.height / 2); if(this.count == 2) { checkedStyle = ` input#menu-${index}:checked + label .menu { transform:scale(${this.scale}) rotate(${this.menuRotation}deg); } input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) { transform: rotate(${45 + this.rotation}deg); top: calc(50% - (${this.height / 2}px))!important; width: ${this.originalWidth}px !important; } input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) { transform: rotate(${-45 - this.rotation}deg); top: calc(50% - (${this.height / 2}px))!important; width: ${this.originalWidth}px !important; } ` } else { checkedStyle = ` input#menu-${index}:checked + label .menu { transform:scale(${this.scale}) rotate(${this.menuRotation}deg); } input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) { transform: rotate(45deg); width: ${this.originalWidth}px !important; top: calc(50% - (${this.height / 2}px))!important; } input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) { left: ${this.left}px !important; opacity: 0; } input#menu-${index}:checked + label .menu .menu_part:nth-of-type(3) { transform: rotate(-45deg); width: ${this.originalWidth}px!important; top: calc(50% - (${this.height / 2}px))!important; } ` } if(this.border == 1) { checkedStyle += `input#menu-${index}:checked + label .menu {transform:scale(${this.scale}) rotate(${this.menuRotation}deg); border: 2px solid black;}` } var style = document.createElement('style'); style.type = 'text/css'; style.classList.add(`menu-${index}`); style.appendChild(document.createTextNode(checkedStyle)); document.head.appendChild(style); let partMarkup = ''; let partMarkupOutput = ''; var iteration = 0; for(var i = 0; i < this.count; i++) { if(this.type == 3) { partMarkup += `<div class="menu_part" style="${partStyles}width: ${this.width - (6 * iteration)}px; top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px); "></div>`; } else { partMarkup += `<div class="menu_part" style="${partStyles}width:${this.originalWidth};top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);"></div>`; } iteration++; partMarkupOutput += `\t\t\t<div class="menu_part"></div>\n`; } this.generatedMarkup = `<input id="menu-${index}" type="checkbox" style="display: none"><label for="menu-${index}"><div class="menu" style="transition: all ${this.transitionSpeed};position: relative;width: ${this.originalWidth + 20}px;height: ${this.originalWidth + 20}px;border-radius: 100%;cursor: pointer;">${partMarkup}</div></label>`; this.outputMarkup = `<input id="menu-${index}" type="checkbox">\n<label for="menu-${index}">\n\t<div class="menu">\n${partMarkupOutput}\t</div>\n</label>` $('.grid').append(`<div class="grid_item"><span>.0${index + 1}</span><i class="fa fa-code" data-index="${index}"></i><div class="grid_item__inner" style="width:${this.originalWidth + 20}px; height: ${this.width + 20}px; ">${this.generatedMarkup}</div></div>`); index++; } build() { } } burgerArray = []; for(var i = 0; i < burgers; i++) { hamburger = new Hamburger(); burgerArray.push(hamburger); } $('.panel').click(function(){ //$('body').toggleClass('open'); }) $('.close').click(function(){ $('body').toggleClass('open'); }) $('.grid_item i').click(function() { $('body').toggleClass('open'); $('.panel .markup').text(burgerArray[$(this).data('index')].outputMarkup); var part = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)'); var partStyles = part.attr('style').split(';'); var partStyleFinal = partStyles.join(';') console.log(partStyles) var partOne = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)'); var test = partOne.attr('style').split(';')[10]; console.log(test) var partOneStyles = `&:nth-of-type(1) {\n\t${partOne.attr('style').split(';')[10]};\n\twidth: ${partOne.css('width')}\n}\n\n`; var partTwo = $(this).next().find('.menu').find('.menu_part:nth-of-type(2)'); var partTwoStyles = `&:nth-of-type(2) {\n\t${partTwo.attr('style').split(';')[10]};\n\twidth: ${partTwo.css('width')}\n}\n\n`; if($(this).next().find('.menu').find('.menu_part').length != 2) { var partThree = $(this).next().find('.menu').find('.menu_part:nth-of-type(3)'); var partThreeStyles = `&:nth-of-type(3) {\n\t${partThree.attr('style').split(';')[10]};\n\twidth: ${partThree.css('width')}\n}\n\n`; } else { var partThree = ''; var partThreeStyles = ''; } var menu = $(this).next().find('.menu'); var menuStyles = menu.attr('style').split(';'); var menuFinal = `#menu-${$(this).data('index')} {\n\tdisplay: none;\n}\n\n.menu { ${menuStyles.join(';\n')} \t&_part { \t\t${partStyleFinal} \t\t${partOneStyles} \t\t${partTwoStyles} \t\t${partThreeStyles} }\n }\n${$('style.menu-' + $(this).data('index'))[0].innerHTML}` console.log($('style.menu-1')[0]) $('.panel .css').text(menuFinal); }) function autoToggle() { setInterval(function(){ $('input').click(); },1000) } //autoToggle();

Related: See More


Questions / Comments: