Bulma Mixins Hamburger
Last Updated :
13 Oct, 2022
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 =
< script src =
</ 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( 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 =
< script src =
</ 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( 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
Share your thoughts in the comments
Please Login to comment...