Hamburger menu icon
If you want to create a menu icon for your website then you will surely like this hamburger menu icon design made with html and css only.
Source Code:
1. HTML
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent ;
}
First line of code imports the Ubuntu font from Google Fonts.
*{ }
This line of code sets the default styles for all elements on the page. It sets the margin and padding to 0, which means that there will be no space between elements. It also sets the box-sizing to border-box, which means that the width and height of an element will include the border and padding. Finally, it sets the -webkit-tap-highlight-color property to transparent, which means that there will be no highlight when the user taps on an element.
2. CSS
STEP-1
body{
font-family: 'Ubuntu', sans-serif;
}
body is the selector, which tells the browser which element the rule applies to. In this case, the rule applies to the body element, which is the main content area of a web page.
font-family is the property name, which specifies the font family for the element.
'Ubuntu' is the first font name in the list. This is the font that the browser will try to use first.
sans-serif is the second font name in the list. This is the font that the browser will use if it does not have the Ubuntu font installed.
STEP-2
.base{
position: relative;
top: 15vh;
height: 100px;
width: 100px;
border-radius: 20px;
background-color: teal;
margin: 20px;
}
The code creates a CSS style called .base. This style defines the following properties for an element:
Position: The element is positioned relative to its parent element. This means that the element will stay in its original position even if its parent element is moved.
Top: The top of the element is 15% of the height of the viewport. This means that the top of the element will be 15% of the way down the screen, regardless of the size of the screen.
Height: The height of the element is 100 pixels.
Width: The width of the element is 100 pixels.
Border radius: The corners of the element are rounded with a radius of 20 pixels.
Background color: The background color of the element is teal.
Margin: The element is surrounded by a margin of 20 pixels.
In other words, the code creates a 100x100 pixel teal square with rounded corners, which is positioned 15% of the way down the screen.
STEP-3
input{
cursor: pointer;
display: block;
height: 100px;
width: 100px;
background-color: teal;
position: relative;
z-index: 2;
opacity: 0;
}
cursor: pointer; // This makes the input element look like a button.
display: block; // This makes the input element take up the full width of its container.
height: 100px; // This sets the height of the input element to 100 pixels.
width: 100px; // This sets the width of the input element to 100 pixels.
background-color: teal; // This sets the background color of the input element to teal.
position: relative; // This makes the input element relative to its parent element.
z-index: 2; // This gives the input element a z-index of 2, which means it will appear above elements with a z-index of 1 or lower.
opacity: 0; // This sets the opacity of the input element to 0, which means it will be invisible.
STEP-4
.top, .center, .bottom{
display: block;
position: absolute;
left: calc(50% - 30px);
height: 4px;
width: 60px;
border-radius: 5px;
background-color: aqua;
transition: all 0.3s;
z-index: 1;
transform-origin: center center;
}
display: block tells the browser to display the elements as blocks, which means they will take up the full width of their container.
position: absolute tells the browser to position the elements absolutely, which means they will be positioned relative to the nearest parent element.
left: calc(50% - 30px) centers the elements horizontally.
height: 4px and width: 60px set the height and width of the elements.
border-radius: 5px makes the edges of the elements rounded.
background-color: aqua sets the background color of the elements to aqua.
transition: all 0.3s makes the elements animate when they are moved.
z-index: 1 sets the z-index of the elements to 1, which means they will appear in front of other elements with a lower z-index.
transform-origin: center center specifies the point around which the elements will be transformed.
In short, this code creates three horizontal bars that are positioned at the top, center, and bottom of the page. The bars are aqua colored and have a rounded border. They animate when they are moved.
STEP-5
.top{
top: calc(50% - 20px);
}
.center{
top: calc(50% - 2px);
}
.bottom{
top: calc(50% + 16px);
}
The top property specifies the top position of the element.
The calc() function calculates the top position by taking 50% of the screen height and subtracting 20 pixels.
The - 20px part of the calculation tells the calc() function to subtract 20 pixels from the 50% value.
The other two classes work in a similar way. The .center class uses the calc() function to calculate the top position by taking 50% of the screen height and subtracting 2 pixels. The .bottom class uses the calc() function to calculate the top position by taking 50% of the screen height and adding 16 pixels.
STEP-6
p{
position:relative;
top:10vh;
}
The p selector specifies that this style rule applies to all paragraph elements (p).
The position:relative property tells the browser to position the paragraph element relative to its normal position in the document flow.
The top:10vh property sets the top margin of the paragraph element to 10% of the height of the viewport.
STEP-7
input:checked ~ #top1{
transform: rotate(35deg) translateX(10px) translateY(15px);
}
input:checked ~ #center1{
opacity: 0;
}
input:checked ~ #bottom1{
transform: rotate(-35deg) translateX(10px) translateY(-15px);
}
input:checked ~ #top2{
transform: rotateZ(25deg) translateX(30px);
width: 30px;
}
input:checked ~ #center2{
transform: translateX(10px);
width: 40px;
}
input:checked ~ #bottom2{
transform: rotateZ(-25deg) translateX(30px);
width: 30px;
}
The code is using the input:checked selector to target the #top1, #center1, and #bottom1 elements when the input checkbox is checked. The input:checked selector will only select the elements if the checkbox is checked.
The code then uses the transform property to rotate, translate, and scale the elements. For example, the code rotates the #top1 element by 35 degrees, translates it 10 pixels to the right and 15 pixels down, and sets its opacity to 0.
The code also changes the width of the #top2 and #bottom2 elements when the checkbox is checked. The #top2 element is rotated 25 degrees, translated 30 pixels to the right, and has its width set to 30 pixels. The #bottom2 element is rotated -25 degrees, translated 30 pixels to the right, and has its width set to 30 pixels.
---END---
Comments
Post a Comment