Hello developers, today in this blog you will learn to create a Neumorphism Sidebar Menu using HTML & CSS.
The Neumorphism effect is a new, minimal way to design with a soft, extruded plastic look. The parts have a dark box shadow on the bottom and, a light box shadow on top, the combination of both creates the effect of the elements pushing themselves through your display. The Neumorphism Sidebar Menu is created using only HTML & CSS.
The sidebar is a user interface element that typically appears as a column to the left or right side of the webpage. The Sidebar consists of several menus which help the user to redirect to the various site within the webpage. When you click on the particular menu, it redirects to that particular webpage. The Sidebar is an essential part of the web page. The Sidebar menu may consist of Home, Profile, and Setting. This sidebar consists of Home, Projects, Dashboard, and so on with their respective icons.
In this blog (Neumorphism Sidebar Menu), the high bar is placed at the top left of the webpage. By clicking the high bar, the sidebar will expand from the left of the webpage. There are many sidebars with their respective icons. The hover effect has been used in the sidebar. There is also a cross button at the top right of the sidebar which is used to close the sidebar.
The source code of this Neumorphism Sidebar Menu is given below, you can copy the source code of this program. You can use this Neumorphism Sidebar Menu, you can take this to the next level with your creativity.
Neumorphism Sidebar Menu [Source Code]
To make this website (Neumorphism Sidebar Menu), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: #ecf0f3;
}
.side_bar{
position: relative;
top: 0;
left: -100%;
width: 300px;
height: 100vh;
background: #ecf0f3;
padding: 12px;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1,
inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
transition: all 0.3s ease;
}
.side_bar .title{
display: flex;
justify-content: space-evenly;
}
.side_bar .title .logo{
font-size: 27px;
font-weight: 600;
color: #31344b;
}
.side_bar ul{
margin-top: 35px;
list-style: none;
}
.side_bar ul a{
color: #3498db;
text-decoration: none;
display: block;
margin-top: 12px;
font-size: 18px;
font-weight: 400;
padding : 10px 25px;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
position: relative;
transition: all 0.2s ease;
}
.side_bar ul i{
margin-right: 10px;
}
.side_bar ul a:hover:before{
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
}
.side_bar ul a:hover:before{
border-radius: 6px;
}
li a:hover{
background: #3498db;
color: #fff;
}
label{
font-size: 17px;
color: #31344b;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
height: 37px;
width: 37px;
border-radius: 50%;
text-align: center;
line-height: 37px;
cursor: pointer;
transition: all 0.3s ease;
}
label:hover{
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
color: #3498db;
}
#check{
display: none;
}
.bars{
position: absolute;
left: 15px;
top: 15px;
}
#check:checked ~ .side_bar{
left: 0;
}
.credit a {
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
Thank you for reading our blog. If you face any problem in creating this Neumorphism Sidebar Menu using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team