Aquileo | Bulma Mixins Hamburger

In this article, we’ll learn about Bulma Hamburger mixin. The Hamburger mixin is an Element mixin that is used to create a set of horizontal bars grouped within the square. This mixin accepts one parameter which is the dimensions of this square.

Bulma Hamburger Class: For creating a mixin, no specific class is provided by Bulma, instead we can create our class and then style the element with the help of SASS mixins.

Syntax:

.bulma-hamburger-mixin {
     @include hamburger($dimensions);
}

Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.

Example 1: Below example illustrates the Bulma Hamburger mixin with 5rem dimensions.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
    <script src=
"https://use.fontawesome.com/releases/v5.15.4/js/all.js">
    </script>
    <link rel="stylesheet" href="gfgstyles.css">
</head>

<body class="content container has-text-centered">
    <div>
        <h1 class="title is-1 has-text-success">
            GeekforGeeks
        </h1>
        
        <h1 class="title is-3">
            Bulma Delete Mixins
        </h1>
    </div>
    <div>
        <button class="bulma-hamburger-mixin">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</body>

</html>

Sytle.scss

CSS

@mixin hamburger($dimensions) {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    height: $dimensions;
    position: relative;
    width: $dimensions;
    margin-left: auto;
    margin-right: auto;

    span {
        background-color: currentColor;
        display: block;
        height: 2px;
        left: calc(50% - 8px);
        position: absolute;
        transform-origin: center;
        transition-property: background-color, 
            opacity, transform;
        width: 20px;

        &:nth-child(1) {
            top: calc(50% - 6px)
        }

        &:nth-child(2) {
            top: calc(50% - 1px)
        }

        &:nth-child(3) {
            top: calc(50% + 4px)
        }
    }

    &:hover {
        background-color: bulmaRgba(black, 0.05)
    }

    // Modifiers
    &.is-active {
        span {
            &:nth-child(1) {
                transform: translateY(5px) rotate(45deg)
            }

            &:nth-child(2) {
                opacity: 0
            }

            &:nth-child(3) {
                transform: translateY(-5px) rotate(-45deg)
            }
        }
    }
}

.bulma-hamburger-mixin {
    @include hamburger(5rem);
}

Output:

Example 2: Below is another example that illustrates the Bulma Hamburger mixin.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
    <script src=
"https://use.fontawesome.com/releases/v5.15.4/js/all.js">
    </script>
    <link rel="stylesheet" href="gfgstyles.css">
</head>

<body class="content container has-text-centered">
    <div>
        <h1 class="title is-1 has-text-success">
            GeekforGeeks
        </h1>
        <h1 class="title is-3">
            Bulma Delete Mixins
        </h1>
    </div>
    <div>
        <div class="left">
            <button class="bulma-hamburger-mixin">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
        <div class="right">
            <button class="bulma-hamburger-mixin">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>
</body>

</html>

Sytle.scss

CSS

@mixin hamburger($dimensions) {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    height: $dimensions;
    position: relative;
    width: $dimensions;
    margin-left: auto;
    margin-right: auto;

    span {
        background-color: currentColor;
        display: block;
        height: 2px;
        left: calc(50% - 8px);
        position: absolute;
        transform-origin: center;
        transition-property: background-color, 
            opacity, transform;
        width: 20px;

        &:nth-child(1) {
            top: calc(50% - 6px);
            color: #2b00e3;
        }

        &:nth-child(2) {
            top: calc(50% - 1px);
            color: #e30000;
        }

        &:nth-child(3) {
            top: calc(50% + 4px);
            color: #05c624;
        }
    }

    &:hover {
        background-color: bulmaRgba(black, 0.05);
    }

    // Modifiers
    &.is-active {
        span {
            &:nth-child(1) {
                transform: translateY(5px) rotate(45deg);
            }

            &:nth-child(2) {
                opacity: 0;
            }

            &:nth-child(3) {
                transform: translateY(-5px) rotate(-45deg);
            }
        }
    }
}

.bulma-hamburger-mixin {
    @include hamburger(5rem);
}

.left {
    float: left;
    padding-left: 180px;
}

.right {
    float: right;
    padding-right: 180px;
}

Output:

Reference: https://bulma.io/documentation/utilities/mixins/#hamburger

Bulma Mixins Hamburger

Explore