Randomly generated Pure CSS menu icons w/ markup and SCSS

index.haml

.grid
.panel
    %i.fa.fa-arrow-left.close
    %h1 HTML
    %p.markup
    %h2 CSS
    %p.css

randomly-generated-pure-css-menu-icons-w-markup-and-scss.markdown

Randomly generated Pure CSS menu icons w/ markup and SCSS

Tired of writing these out everytime i do a site, so i made this. Hopefully a lil time saver yo!

A Pen by Captain Anonymous on CodePen.

License.

script.js

// 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();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@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;
    
    &:hover {
        background: #f6f6f6;
    }
}
body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'Roboto Condensed', sans-serif;
    
    &.open {
        .panel {
             right: 0;
        }
        .grid {
            transform: translateX(-450px);
            opacity: 0.2;
            pointer-events: none;
        }
    }
    
    span {
        font-size: 10px;
        opacity: 0.1;
        position: absolute;
        top: 20px;
        left: 20px;
    }
}

$itemWidth : 8.3333vw;

.grid_alt {
    background: #2a3648;
        span {
        color: white;
    }
    
    .grid_item {
        &:hover {
            background: #293340;
        }
    }
    .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;
    
    h1, 
    h2 {
        margin: 0;
        font-size: 16px;
    }
    
    h2 {
        margin-top: 30px;
    }
    
    p {
     white-space: pre;
        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;
    
    &_item {
        width: $itemWidth;
        height: $itemWidth;
        
        @media only screen and (max-width: 1200px) {
            width: 20vw;
        height:  20vw;
        }
        
        @media only screen and (max-width: 700px) {
            width: 25vw;
        height:  25vw;
        }
        
        @media only screen and (max-width: 400px) {
            width: 50vw;
        height:  50vw;
        }
        float: left;
        position: relative;
        transition: all 0.5s;
        overflow: hidden;
        
        &:hover {
            i {
                bottom: 20px;
            }
        }
        
        i {
            opacity: 0.1;
            position: absolute;
            right: 20px;
            bottom: -20px;
            transition: all 0.3s;
            cursor: pointer;
            font-size: 12px;
            
            &:hover {
                opacity: 1;
               // border: 2px solid black;
            }
        }
        
        &:hover {
            background: #f7f7f7;
        }

        @for $i from 1 through 100 {
            
            &:nth-of-type(#{$i}) {
                opacity: 0;
                //background: rgb(random(255), random(255), random(255)) !important;
                animation: fadeIn 1s $i / 35 + 0s forwards;
                .menu {
                    &_part {
                        //background: rgb(random(255), random(255), random(255)) !important;
                    }
                }
            }
        }


        &__inner {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 50%;
            transform: translatey(-50%);
            text-align: center;

            & .menu {
                &:hover {
                    opacity: 1 !important;
                }
            }
        }
    }
}

@keyframes fadeIn {
    to{opacity: 1}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />