Create Something Different Expand Menu Program by This Source Code
HTML Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand Menu</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
<div class="container" onclick="expand()">
<i class="fa fa-plus" id="plus"></i>
</div>
<div class="menu_group" id="menu">
<a href="#"><i class="fas fa-microphone"></i></a>
<a href="#"><i class="fas fa-user"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<a href="#"><i class="fas fa-video"></i></a>
<a href="#"><i class="fas fa-camera"></i></a>
<a href="#"><i class="fas fa-bell"></i></a>
</div>
<script src="valid.js"></script>
</body>
</html>
CSS Code :-
*{
margin: 0;
padding: 0;
}
body{
background: url(https://hdwallpaperim.com/wp-content/uploads/2017/09/16/57630-simple_background.jpg) center center;
overflow: hidden;
}
.container{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
height: 100px;
width: 100px;
background: #8A2BE2;
text-align: center;
border-radius: 50%;
}
.fa-plus{
margin-top: 20px;
font-size: 60px;
display: block;
color: yellow;
cursor: pointer;
transition: .5s;
}
.menu_group{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
margin: auto;
background: #D8BFD8;
border-color: #9932CC;
border-style: double;
border-radius: 50%;
z-index: -1;
transform: scale(0);
transition: .5s;
}
.menu_group a{
position: absolute;
display: inline-block;
font-size: 15px;
color: #9932CC;
}
a:hover{
color: #2c3e50;
}
a:nth-child(1){
top: 6px;
left: 45px;
}
a:nth-child(2){
top: 24px;
left: 77px;
}
a:nth-child(3){
top: 58px;
left: 76px;
}
a:nth-child(4){
top: 78px;
left: 42px;
}
a:nth-child(5){
top: 58px;
left: 10px;
}
a:nth-child(6){
top: 23px;
left: 12px;
}
JavaScript Code :-
var menu = document.getElementById('menu');
var plus = document.getElementById('plus');
var abc = 0;
function expand(){
if (abc == 0) {
menu.style.transform = "scale(3)";
plus.style.transform = "rotate(45deg)";
abc = 1;
}else{
menu.style.transform = "scale(0)";
plus.style.transform = "rotate(0deg)";
abc = 0;
}
}
Posts
37 Comments
Perfect
ReplyDeleteAmazing
ReplyDeleteSuperb
ReplyDeleteAwesome
ReplyDeletePerfect
ReplyDeleteWonderful
ReplyDeleteNicely done
ReplyDeleteNicely done
ReplyDeleteSuperb
ReplyDeleteExcellent
ReplyDeleteFantastic
ReplyDeleteFabulous
ReplyDeleteWonderful
ReplyDeleteInteresting
ReplyDeleteInteresting
ReplyDeleteAwesome work
ReplyDeleteInteresting
ReplyDeleteAwesome
ReplyDeleteInteresting
ReplyDeleteAwesome
ReplyDeleteInteresting
Perfect
ReplyDeleteSuperb
ReplyDeleteInteresting
Interesting
ReplyDeletePerfect
ReplyDeleteAmazing
ReplyDeleteExcellent
ReplyDeletePerfect
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteBrilliant
ReplyDeleteAmazing
ReplyDeleteWonderful
ReplyDeleteFantastic
ReplyDeleteInteresting
ReplyDelete&
Wonderful
Interesting
ReplyDelete