HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated App Drawer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-drawer" id="appDrawer">
<button class="toggle-btn" onclick="toggleDrawer()">Toggle Drawer</button>
<ul class="app-list">
<li><i class="fab fa-facebook-f"></i> Facebook</li>
<li><i class="fab fa-twitter"></i> Twitter</li>
<li><i class="fab fa-instagram"></i> Instagram</li>
<li><i class="fab fa-linkedin-in"></i> LinkedIn</li>
<li><i class="fab fa-youtube"></i> YouTube</li>
<li><i class="fab fa-tiktok"></i> TikTok</li>
<li><i class="fab fa-snapchat-ghost"></i> Snapchat</li>
<li><i class="fab fa-pinterest"></i> Pinterest</li>
<li><i class="fab fa-reddit"></i> Reddit</li>
<li><i class="fab fa-discord"></i> Discord</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
}
.app-drawer {
width: 250px;
height: 100vh;
background-color: #333;
color: white;
position: fixed;
top: 0;
left: -250px;
transition: left 0.3s ease-in-out;
}
.toggle-btn {
background-color: transparent;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
padding: 10px;
}
.app-list {
list-style-type: none;
padding: 0;
}
.app-list li {
padding: 10px;
border-bottom: 1px solid #555;
display: flex;
align-items: center;
}
.app-list li i {
margin-right: 10px;
font-size: 20px;
}
/* Neon glowing effect */
@keyframes neonGlow {
0% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;
}
100% {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00, 0 0 70px #00ff00;
}
}
.app-list li:hover i {
animation: neonGlow 1s ease-in-out infinite alternate;
}
