<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu">
<p>Social Media</p>
<i class="fas fa-angle-down"></i>
</div>
<ul class="social-lists hide">
<li>
<i class="fab fa-facebook" style="color: blue"></i>
<p>Facebook</p>
</li>
<li>
<i class="fab fa-youtube" style="color: red"></i>
<p>YouTube</p>
</li>
<li>
<i class="fab fa-twitter" style="color: blue"></i>
<p>Twitter</p>
</li>
<li>
<i class="fab fa-linkedin" style="color: blue"></i>
<p>Linkedin</p>
</li>
</ul>
<script src="script.js"></script>
</body>
</html>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: center;
font-family: sans-serif;
background: linear-gradient(135deg, purple 20%, orange 80%);
}
.menu {
background: lightgrey;
width: 300px;
opacity: 0.3;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
cursor: pointer;
}
.menu .fas{
transition: transform .2s;
}
.menu p {
margin: 0 10px;
display: flex;
align-items: center;
}
.social-lists {
background: lightgray;
width: 300px;
padding: 10px;
opacity: 0.3;
list-style-type: none;
border-radius: 5px;
}
.social-lists li {
display: flex;
align-items: center;
cursor: pointer;
transition: padding 0.2s linear;
}
.social-lists li:hover {
background: darkgray;
border-radius: 5px;
padding-left: 10px;
}
.social-lists li .fab {
margin: 0 10px;
}
.rotate .fas {
transform: rotate(180deg);
}
.hide {
visibility: hidden;
}
const menuEl = document.querySelector(".menu");
const menuTextEl = document.querySelector(".menu p");
const socialListsEl = document.querySelector(".social-lists");
const liEls = document.querySelectorAll(".social-lists li");
menuEl.addEventListener("click", () => {
socialListsEl.classList.toggle("hide");
menuEl.classList.toggle("rotate");
});
liEls.forEach((liEl) => {
liEl.addEventListener("click", () => {
menuTextEl.innerHTML = liEl.innerHTML;
socialListsEl.classList.add("hide");
menuEl.classList.toggle("rotate");
});
});