Hello developers, today in this blog you will learn to create a Responsive Sidebar Menu with modern UI using HTML & CSS.
Earlier we have posted a Responsive Sidebar Menu with a hover effect using HTML & CSS, now it’s time to create a Responsive Sidebar Menu with modern UI using 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, My Profile, and Camera with their respective icons.
In this blog (Responsive Sidebar Menu with modern UI), the icons are placed on the left side of the webpage. The hover effect has been used in the sidebar. This page is made responsive by using HTML and CSS.
When you open this sidebar menu on the PC, this sidebar text will appear along with its icon, On the tab screen, the sidebar icons alone will appear. When you hover over this sidebar, the icons with their text appear. On the mobile screen, the horizontal bar alone will appear at the top side of the screen. When you hover over this horizontal bar, the icons with their text appear.
The source code of this Responsive Sidebar Menu with modern UI is given below, you can copy the source code of this program. You can use this Responsive Sidebar Menu with modern UI, you can take this to the next level with your creativity.
Responsive Sidebar Menu with modern UI [Source Code]
To make this website (Responsive Sidebar Menu with modern UI), 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.
/* Primary Styles */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 1em;
color: #333;
background-color: lightgreen;
}
h1 {
font-size: 1.4em;
}
em {
font-style: normal;
}
a {
text-decoration: none;
color: inherit;
}
/* Layout */
.s-layout {
display: flex;
width: 100%;
min-height: 100vh;
}
.s-layout__content {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
/* Sidebar */
.s-sidebar__trigger {
z-index: 2;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4em;
background: #192b3c;
}
.s-sidebar__trigger > i {
display: inline-block;
margin: 1.5em 0 0 1.5em;
color: #fff;
}
.s-sidebar__nav {
position: fixed;
top: 0;
left: -15em;
overflow: hidden;
transition: all .3s ease-in;
width: 15em;
height: 100%;
background: #12192c;
color: rgba(255, 255, 255, 0.7);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.s-sidebar__nav:hover,
.s-sidebar__nav:focus,
.s-sidebar__trigger:focus + .s-sidebar__nav,
.s-sidebar__trigger:hover + .s-sidebar__nav {
left: 0;
}
.s-sidebar__nav ul {
position: absolute;
top: 4em;
left: 0;
margin: 0;
padding: 0;
width: 15em;
}
.s-sidebar__nav ul li {
width: 100%;
}
.s-sidebar__nav-link {
position: relative;
display: inline-block;
width: 90%;
height: 4em;
}
.s-sidebar__nav-link em {
position: absolute;
top: 50%;
left: 4em;
transform: translateY(-50%);
}
.s-sidebar__nav-link:hover {
background: lightgreen;
border-radius: 10px;
margin: 0 10px;
color:#000
}
.s-sidebar__nav-link > i {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 4em;
height: 4em;
}
.s-sidebar__nav-link > i::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Mobile First */
@media (min-width: 42em) {
.s-layout__content {
margin-left: 4em;
}
/* Sidebar */
.s-sidebar__trigger {
width: 4em;
}
.s-sidebar__nav {
width: 4em;
left: 0;
}
.s-sidebar__nav:hover,
.s-sidebar__nav:focus,
.s-sidebar__trigger:hover + .s-sidebar__nav,
.s-sidebar__trigger:focus + .s-sidebar__nav {
width: 15em;
}
}
@media (min-width: 68em) {
.s-layout__content {
margin-left: 15em;
}
/* Sidebar */
.s-sidebar__trigger {
display: none
}
.s-sidebar__nav {
width: 15em;
}
.s-sidebar__nav ul {
top: 1.3em;
}
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Sidebar Menu with modern UI 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