Hey, developers welcome to Day 12 of our 90Days 90Projects challenge. And in Day 12 we are going to create a Sidebar Menu using HTML and CSS.
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Sidebar Menu </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-container">
<div class="left-menu">
<div class="logo">
<img src="./logo.png" alt="">
<span><a href="">Geeks Help</a></span>
</div>
<ul>
<li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-house"></i> Home </a>
</li>
<li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-user"></i> User </a>
</li>
<li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-file"></i> Files </a>
</li>
<li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-store"></i> Saved </a>
</li>
<li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-calendar-days"></i>
Events </a></li>
<li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-message"></i> Message
</a></li>
<li class="sidebar-item"><a href="#"><i class="fa-solid fa-chart-line"></i> Analytics </a></li>
<li class="sidebar-item"><a class="sidebar-link" href="#"><i class="fa-solid fa-rocket"></i> Services
</a></li>
<li class="sidebar-item" id="settings"><a class="sidebar-link" href="#"><i class="fa-solid fa-gear"></i>
Settings </a>
<li>
</ul>
</div>
<!-- Right Content Goes here -->
<div class="right-content"></div>
</div>
</body>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container {
width: 100%;
height: 100vh;
background-color: purple;
}
.left-menu {
background: white;
position: relative;
width: 4.5rem;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
transition: all .4s ease;
}
.left-menu:hover {
width: 13rem;
}
.left-menu ul li a {
display: flex;
}
.logo {
width: 80px;
position: relative;
top: 1rem;
left: 0.5rem;
display: flex;
margin: 10px 0 0 0px;
justify-content: center;
align-items: center;
}
.logo img {
width: 100%;
z-index: 100;
position: absolute;
}
.logo span {
font-weight: bold;
padding: 10px;
font-size: 18px;
text-transform: uppercase;
}
.logo a {
position: relative;
left: 180px;
color: #7410f0;
font-size: 18px;
display: table;
text-align: left;
width: 300px;
text-decoration: none;
padding: 10px;
font-family: 'Poppins', 'sans-serif';
}
.left-menu ul {
margin-top: 2rem;
margin-left: 1.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
ul li {
font-family: 'Poppins', sans-serif;
list-style: none;
margin-bottom: 1rem;
align-items: center;
transition: all .3s linear;
}
ul li a {
padding: 0.5rem;
color: #7410f0;
text-decoration: none;
}
ul li a i {
text-decoration: none;
color: #7410f0;
font-size: 1.4rem;
cursor: pointer;
transition: all .3s linear;
margin-right: 1.2rem;
}
.sidebar-item i {
width: 20px;
height: 20px;
text-align: center;
}
#settings {
position: absolute;
bottom: 1rem;
}
.left-menu ul li:hover {
transform: translateX(.4rem);
transition: all .4s linear;
}
.left-menu ul li:hover .fa-solid,
.left-menu ul li:hover a {
font-weight: bold;
color: purple;
}
Hello,
ReplyDeleteif we add content in the div:
div class right-content
this inserts it below the menu.
Is there a class missing in the css?
No this is not missing we add it so that if someone try to write the content in the div whose class is "right-content" so that they can select this div in CSS by .right-content. I hope you got the point
Delete'right-content' setting in css is missing
ReplyDelete'.sidebar-link' definition is also missing from css list
ReplyDelete