Dropdown Menu with HTML & CSS
View more on BoxCoding
HTML:
<div class="context">
<a class="dropdown">Dropdown<i class='bx bx-chevron-down'></i></a>
<ul class="hidden">
<li><a href="#"><i class="bx bx-plus"></i>New tab to the right</a></li>
<li class="divisor"></li>
<li><a href="#"><i class="bx bx-save"></i>Save</a></li>
<li><a href="#"><i class="bx bx-printer"></i>Print</a></li>
<li><a href="#"><i class="bx bx-undo"></i>Undo</a></li>
<li class="divisor"></li>
<li><a href="#"><i class="bx bx-comment"></i>Comment</a></li>
<li><a href="#"><i class="bx bx-expand-horizontal"></i>Inspect</a></li>
</ul>
</div>
CSS:
/* ===== Boxicons CSS ===== */
@import url("https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css");
.context {
position: relative;
}
.context .dropdown {
display: flex;
align-items: center;
justify-content: space-between;
width: 220px;
gap: 4px;
background-color: rgb(0, 0, 0, 0);
border: 1px solid rgb(0, 0, 0, .1);
cursor: pointer;
padding: 12px 20px;
border-radius: 10px;
transition: .3s;
}
.context .dropdown:hover {
background-color: rgb(0, 0, 0, .1);
border: 1px solid rgb(0, 0, 0, 0);
}
.context .dropdown i {
margin-top: 2px;
font-size: 1.3em;
pointer-events: none;
transform: rotate(0);
transition: .3s;
}
.context .dropdown i.rotate {
transform: rotate(180deg);
}
.context ul {
position: absolute;
left: 50%;
transform: translate(-50%, 10px);
opacity: 1;
width: 100%;
padding: 0;
border-radius: 10px;
border: 1px solid rgb(0, 0, 0, .1);
color: rgb(20, 20, 20);
list-style-type: none;
animation: fade-in-context .3s;
}
.context ul li a{
display: flex;
align-items: center;
color: #000;
text-decoration: none;
width: 100%;
padding: 14px 20px;
box-sizing: border-box;
border-radius: 7px;
cursor: pointer;
user-select: none;
transition: .3s;
background-color:rgb(200, 200, 200, 0);
font-size: 1em;
}
.context ul li a:hover {
background-color: rgb(0, 0, 0, .1);
}
.context ul li a i {
color: rgb(20, 20, 20, .7);
font-size: 18px;
margin-right: 10px;
}
.context ul .divisor {
width: 100%;
height: 1px;
background-color: rgb(100, 100, 100, .2);
}
@keyframes fade-in-context {
0% { transform: translate(-50%, 0); opacity: 0; }
100% { transform: translate(-50%, 10px); opacity: 1; }
}
.context .hidden {
display: none;
}
JavaScript:
const dropDowns = document.querySelectorAll(".dropdown");
dropDowns.forEach((dropDown, index) => {
dropDown.addEventListener("click", handleOnClickDropDown);
});
function handleOnClickDropDown(e) {
e.target.parentNode.children[1].classList.toggle("hidden");
e.target.children[0].classList.toggle("rotate");
}
View more on BoxCoding
Top comments (1)
🔥🔥🔥