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" > GeekforBeginner </ 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( 45 deg) } &:nth-child( 2 ) { opacity: 0 } &:nth-child( 3 ) { transform: translateY( -5px ) rotate( -45 deg) } } } } .bulma-hamburger-mixin { @include hamburger( 5 rem); } |
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" > GeekforBeginner </ 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( 45 deg); } &:nth-child( 2 ) { opacity: 0 ; } &:nth-child( 3 ) { transform: translateY( -5px ) rotate( -45 deg); } } } } .bulma-hamburger-mixin { @include hamburger( 5 rem); } . left { float : left ; padding-left : 180px ; } . right { float : right ; padding-right : 180px ; } |
Output:
Reference: https://bulma.io/documentation/utilities/mixins/#hamburger
Contact Us