Sidebar Menu using HTML, CSS & JavaScript | How To Create Side Navigation Menu?
Learn how to create a website's sidebar navigation menu using HTML, CSS & JavaScript. If you want to create a website with an amazing hover animation UI sidebar menu? or you have just learned the basics of HTML & CSS and now you're trying to learn more about CSS tips and tricks then this one is for you! 🚀<!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">
<link rel="stylesheet" href="style.css">
<title>Sidebar Menu</title>
</head>
<body>
<div class="navigation">
<div class="menuToggle"></div>
<ul>
<li class="list active" style="--colr: #368ff4;">
<a href="#">
<span class="icon"><ion-icon name="home-outline"></ion-icon></span>
<span class="text">Home</span>
</a>
</li>
<li class="list" style="--colr: #36f43f;">
<a href="#">
<span class="icon"><ion-icon name="person-outline"></ion-icon></span>
<span class="text">About</span>
</a>
</li>
<li class="list" style="--colr: #13f4d5;">
<a href="#">
<span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span>
<span class="text">Message</span>
</a>
</li>
<li class="list" style="--colr: #de36f4;">
<a href="#">
<span class="icon"><ion-icon name="camera-outline"></ion-icon></span>
<span class="text">Photos</span>
</a>
</li>
<li class="list" style="--colr: #8c9196;">
<a href="#">
<span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
<span class="text">Settings</span>
</a>
</li>
</ul>
</div>
<script src="main.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Open your index.html file on your Visual Studio Code Copy the HTML code and paste it to your editor and save it by using the keyboard shortcut CTRL+S.
CSS Background Color Animation Effect With Coding Example | HTML CSS Tutorial For Beginners Friendly
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #505050;
}
.navigation {
position: fixed;
inset: 20px 0 20px 20px;
width: 75px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
transition: .5s;
}
.navigation.open {
width: 250px;
}
.navigation .menuToggle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
border-bottom: 1px solid rgba(0,0,0,0.25);
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 23px;
}
.navigation .menuToggle::before {
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #333;
transform: translateY(-8px);
transition: .3s;
}
.navigation.open .menuToggle::before {
transform: translateY(0px) rotate(45deg);
}
.navigation .menuToggle::after {
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #333;
transform: translateY(8px);
transition: .3s;
box-shadow: 0 -8px 0 #333;
}
.navigation.open .menuToggle::after {
transform: translateY(0px) rotate(-45deg);
box-shadow: 0 0 0 #333;
}
.navigation ul {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.navigation ul li {
list-style: none;
position: relative;
width: 100%;
height: 60px;
padding: 0 10px;
transition: .5s;
}
.navigation.open ul li:hover {
background: var(--colr);
transition: .5s;
border-radius: 10px;
width: 200px;
transform: translateX(20px);
}
.navigation ul li.active {
transform: translateX(20px);
}
.navigation.open ul li.active {
transform: translateX(10px);
}
.navigation ul li a {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: center;
text-decoration: none;
}
.navigation ul li a .icon {
position: relative;
display: block;
min-width: 55px;
height: 55px;
line-height: 60px;
transition: .5s;
border-radius: 10px;
font-size: 1.75em;
color: #222;
}
.navigation ul li.active a .icon {
color: #fff;
background: var(--colr);
}
.navigation ul li a .icon::before {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
background: var(--colr);
filter: blur(8px);
opacity: 0;
transition: .5s;
}
.navigation ul li.active a .icon::before {
opacity: .5;
}
.navigation ul li a .text {
position: relative;
padding: 0 15px;
height: 60px;
display: flex;
align-items: center;
color: #333;
opacity: 0;
visibility: hidden;
transition: .5s;
}
.navigation.open ul li a .text {
opacity: 1;
visibility: visible;
}
.navigation ul li.active a .text {
color: var(--colr);
}
.navigation ul li.active:hover a .text {
color: #fff;
}
const menu = document.querySelector('.menuToggle');
const nav = document.querySelector('.navigation');
menu.onclick = function () {
nav.classList.toggle('open')
}
const list = document.querySelectorAll('.list');
function activeLink() {
list.forEach((item) =>
item.classList.remove('active'));
this.classList.add('active');
}
list.forEach((item) =>
item.addEventListener('click', activeLink))
Step 4: Now you are ready to test the code. Go to your folder again and open your index.html file with Google Chrome Browser.
If you get any error in your code and you are just stuck on it then please go to our Facebook Group and create a post with a screenshot and problem details.
Happy Learning!
0 Comments