Create a Sidebar Nav Using HTML and CSS in Easy Steps
Hello, guys welcome to the Codewithrandom blog, Today we learn How to create a Responsive Sidebar Nav Using HTML and CSS. We learn topics like how to Style a Sidebar nav, How to use Media Queries For Responsive sidebar nav, transform, inline-block, trigger, and many more things about sidebars.
Q. What is Sidebar Nav?
In modern 2021 mobile-first design is first priority for a web developer/ web designer so Sidebar Nav is a key feature of websites just like a normal website has menu links and a hamburger buts it ease-out from the side of the website or the majority of developers use the left side for creating sidebar so if you want to be a perfect web developer so you need to know about how to create a significant sidebar nav so start today’s project.
HTML Structure of Sidebar Nav:-
<div class="s-layout"> <div class="s-layout__sidebar"> <a class="s-sidebar__trigger" href="#"> <i class="fa fa-bars"></i> </a> <nav class="s-sidebar__nav"> <ul> <li> <a class="s-sidebar__nav-link" href="#"> <i class="fa fa-home"></i><em>Home</em> </a> </li> <li> <a class="s-sidebar__nav-link" href="#"> <i class="fa fa-blog"></i><em>Blog</em> </a> </li> <li> <a class="s-sidebar__nav-link" href="#"> <i class="fa fa-user"></i><em>Contact</em> </a> </li> <li> <a class="s-sidebar__nav-link" href="#"> <i class="fa fa-info"></i><em>About</em> </a> </li> </ul> </nav> </div> <main class="s-layout__content"> <h1>Sidebar</h1> </main>
Add this fontawesome CDN link in your Html Code Using Link Tag!
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css
Here we start our html code and start giving structure to the site but first, you need to link the above link in your head then we start to create our structure we create a parent div using class s-layout, s denotes sidebar then we create multiple divs, ul for ordering the nav menu next we create li and anchor <a> tags then create the main element it’s not usable but gives a better look in the end after it you get output then we start our styling…
50+ HTML, CSS & JavaScript Projects With Source Code
Output…
Styling of Sidebar Nav:-
/* Primary Styles */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 1em;
color: #333;
}
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: #000;
}
.s-sidebar__trigger > i {
display: inline-block;
margin: 1.5em 0 0 1.5em;
color: #ffff;
}
.s-sidebar__nav {
position: fixed;
top: 0;
left: -15em;
overflow: hidden;
transition: all .3s ease-in;
width: 15em;
height: 100%;
background: #007ff5;
color: rgba(255, 255, 255, 0.7);
}
.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: 100%;
height: 4em;
}
.s-sidebar__nav-link em {
position: absolute;
top: 50%;
left: 4em;
transform: translateY(-50%);
}
.s-sidebar__nav-link:hover {
background: #4d6276;
}
.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%);
}Styling gives us an awesome and targeted goal look for us so I hope you know about the basics of css like position, top, left, transform, inline-block, width, height, background or overflow, etc. after we also do media-query styling for responsiveness.
Portfolio Website using HTML and CSS (Source Code)
Output…
Styling for Mobile First:-
/* Primary Styles */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 1em;
color: #333;
}
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: #000;
}
.s-sidebar__trigger > i {
display: inline-block;
margin: 1.5em 0 0 1.5em;
color: #ffff;
}
.s-sidebar__nav {
position: fixed;
top: 0;
left: -15em;
overflow: hidden;
transition: all .3s ease-in;
width: 15em;
height: 100%;
background: #007ff5;
color: rgba(255, 255, 255, 0.7);
}
.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: 100%;
height: 4em;
}
.s-sidebar__nav-link em {
position: absolute;
top: 50%;
left: 4em;
transform: translateY(-50%);
}
.s-sidebar__nav-link:hover {
background: #4d6276;
}
.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;
}
}If we need to create a mobile-first design so need to code some media queries using a minimum of 42 rem, or 62 rem, or do some display, width, top, or margin, this is ready to get a look.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Final Output Sidebar Nav Using HTML and CSS…
Hope you like this post and enjoy it. If we did any mistake please comment on it so this help full for also our users. Thank you for reading.
Written by Tushar Sharma
Team Codewith_Random
