in this tutorial, I will show you how to make a beautiful and cool drop-down menu using javascript
we will need to use font awesome to get some icons.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="https://kit.fontawesome.com/425a08e296.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Post Title</h1>
<div class="option">
<i onclick="Toggle()" class="fas fa-ellipsis-h"></i>
<ul id="menu">
<li>Share</li>
<li>edit</li>
<li>Delete</li>
</ul>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae arcu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat.
</p>
</div>
<script>
var menu = document.getElementById('menu')
function Toggle(){
if(menu.style.display== "block"){
menu.style.display = "none";
}else{
menu.style.display = "block";
}
}
</script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
*{
padding: 0;
margin: 0;
outline: 0;
}
body{
background-color: #2196f3;
}
.container{
background-color: #fff;
box-shadow: 0 6px 8px rgba(0,0,0,.1);
padding: 15px 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 400px;
font-family: 'Nunito',sans-serif;
}
.option{
position: absolute;
right: 56px;
transform: translateX(100%);
top: 22px;
}
.option ul{
position: relative;
left: -40%;
padding: 5px 10px;
background-color: #fafafa;
box-shadow: 0 6px 8px rgba(0,0,0,.3);
list-style: none;
width: 100px;
display: none;
user-select: none;
}
.option ul li{
padding: 5px 10px;
transition: .4s;
text-align: center;
cursor: pointer;
}
.option ul li:hover{
background-color: #e0e0e0;
}
.option i{
padding: 8px;
border-radius: 30px;
transition: .4s;
}
.option i:hover{
background-color: #e2e2e2;
}
Make a More option Drop Down menu using JavaScript
Reviewed by Medics
on
October 23, 2019
Rating:
Reviewed by Medics
on
October 23, 2019
Rating:
No comments: