How To Design - Sidebar Menu
Learn how to create a Sidebar Menu with HTML, CSS
How To Create a Sidebar Menu
Step 1) Add HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>Your Logo</h2>
<ul>
<li><a href="#"><i class="fas fa-home"></i>Home</a></li>
<li><a href="#"><i class="fas fa-user"></i>Profile</a></li>
<li><a href="#"><i class="fas fa-address-card"></i>About</a></li>
<li><a href="#"><i class="fas fa-project-diagram"></i>Portfolio</a></li>
<li><a href="#"><i class="fas fa-blog"></i>Blogs</a></li>
<li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
<li><a href="#"><i class="fas fa-map-pin"></i>Map</a></li>
</ul>
<div class="social_media">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="main_content">
<div class="header">Welcome!! Have a nice day.</div>
<div class="info">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
</div>
</div>
</div>
</body>
</html>Step 2) Add CSS:
/*
This is a Sidebar Menu made with HTML, CSS. You can freely use it in your project.
It is made with ♥ by Learn Computer Academy. Visit our website: www.learncomputer.in
*/
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
/* Normalization */
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
font-size: 16px;
color: #000;
line-height: 1.3;
background-color: #fcfcfc;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
display: inline-block;
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 200px;
height: 100%;
background: #017369;
padding: 30px 0px;
position: fixed;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #fff;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #069286;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
background: #017369;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 8px 0 rgba(0,0,0,.25);
transition: all .3s ease-in-out;
}
.wrapper .sidebar .social_media a:hover{
box-shadow: inset 0 0 8px 0 rgba(0,0,0,.25);
}
.wrapper .main_content{
width: 100%;
margin-left: 200px;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.wrapper .main_content .info{
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
@media (max-height: 500px){
.social_media{
display: none !important;
}
}