 |
| JS based circular menu |
Related Articles:
Floating Social Menu V1.0
Pre Loader V5.0 (With two different animation)
Here's the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Circular Menu by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
<div id="menu" onclick="menu(),menuClose()"></div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</body>
<style>
body{
background-color: #ffff8b;
}
#menu{
position: absolute;
top:42.6%;
left:46.25%;
width:100px;
height:100px;
background-color: #887c88;
border-radius: 50%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi62nXV7bk_l-8-BoDwCsZpLYqsCk_oTgOQEImLH5ogSbZO97EK1qcoXeKpT2JjwdKjxOw3jD5VPWDkDY1LLrhX3a5-eUxnSX38y1KWRsKY6PVzhKQsu9j2XQVnsaBTyEhny4NUVVM1Mc/s1600/nav.png);
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 30px 30px;
cursor: pointer;
cursor: hand;
-webkit-transition: all 0.2s ease;
-moz-transition : all 0.2s ease 0s;
}
#menu:hover{
background-color: white;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4JWOttFg-jfnymOuZBEp4i9_0OoQJ0f27e9eoD0ltvXDOfTkG8-3bOJia0zqEfDWrx6g7yM_QwwRmY4M7VF3rRmuJJfcIRNCCf0H1vmcIPv4rwi4elk5iE28sbmSeQRogirUGxXhQJ7s/s1600/nav1.png);
}
#option1{
position: absolute;
top:43%;
left:46.6%;
width:85px;
height:85px;
background-color: #9b919b;
border-radius: 50%;
cursor: pointer;
cursor: hand;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease 0s;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7bxW3rYQAnSrAYLmbKEObrWpaD83j3E08X7aIVXrdVs55fPGkb8MToyIwhngLizoXLSlcOUhbuy4u0p9rfh-e6_ln_xBAgf36KAHP_MDNqN1aDjDAf_UoFmj5jTQt9W7dEB52jVR7H0/s1600/home.png);
background-size: 35px 35px;
background-position: 25px 25px;
background-repeat: no-repeat;
}
#option1:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hCWiuYlqaIxVmHHFM3x-yqZPJ6aVmsvfuWDLz863Wr5X9Fdd_DkKocNlTsYa8TxyReo1IfX_BEUmV_sxER_uI983b893ZmfzSFCWVx0A7OcCW5dvrHUigOWG921o3WHPdbZYQED0nto/s1600/home1.png);
background-color: white;
}
#option2{
position: absolute;
top:43%;
left:46.6%;
width:85px;
height:85px;
background-color: #9b919b;
border-radius: 50%;
cursor: pointer;
cursor: hand;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease 0s;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEItLV1PX6gTlNwhbJzAgtObJ77qFRprSfjFrpVNQ9abE92qnMBYXLPGw18KGH4SJgl_LuRlZerf99USa7Ef3Zpt6Hty_BnuFu2fBXjKk751OHBuHtps_PQ_IFr_oKoOiFPzU0XxnsMFo/s1600/mail2.png);
background-size: 35px 35px;
background-position: 25px 25px;
background-repeat: no-repeat;
}
#option2:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOYkrcON9-gcSwwa-X6F9tKHTlzTtN_94jMZ0Zy0yQqP-EORyPRptzrWPln4fZndPnEJ6metgDcrR_xb716cNww7vF1RSUCgtwuUQZQihlm2tsNQIROOP9G2jhR97hKD8U5pi1Fu6M498/s1600/mail1.png);
background-color: white;
}
#option3{
position: absolute;
top:43%;
left:46.6%;
width:85px;
height:85px;
background-color: #9b919b;
border-radius: 50%;
cursor: pointer;
cursor: hand;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease 0s;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf3AiHyoNH5q_cdXNqPULcJTHK6_fKaXSMmAlqXm1O6g5YEK9x_sPZpq-CH8hFuZIf7WHwEG22AFCoq7eyeb6v2Sotq6jB77SnI_rn1Nsvj978BWP8kNtwG783M4Wqdo7cu8sBRZBQdDc/s1600/about1.png);
background-size: 35px 35px;
background-position: 25px 25px;
background-repeat: no-repeat;
}
#option3:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSdwwlZe6aMCsD-c8Zg9kFFmobf5tyoF7nQjjXhCefCKTjMfFihN4xSChzxI2UJ1lzXUgcEz-DfsyW9kkCELkiC3yzbfOzB1yDl-sh2JFjPXaaEhu3EBIj4v0TdwUKv4yDRMOgZaYwjQ0/s1600/about2.png);
background-color: white;
}
#option4{
position: absolute;
top:43%;
left:46.6%;
width:85px;
height:85px;
background-color: #9b919b;
border-radius: 50%;
cursor: pointer;
cursor: hand;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease 0s;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmHHVnJXPBxwFgdu624dXkQwUo-u0MAQAcCGxxBiX-wQsVT0I80i60kxmB4oQ4jtFkmraySk21f7qKu68FfDJ67SAZI6RNPnGTAbNhQKHqayCzw7mgBKE1GB23QRJg3qXP7KQ-xtRIyd4/s1600/gallery.png);
background-size: 35px 35px;
background-position: 25px 25px;
background-repeat: no-repeat;
}
#option4:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN7PwYQr8U5zRSeaoktFjX39X9HxNJWptTX3RWly92yaKTlTOdFnR9x60vmXMt3Po464pOZUjbM7kVYyLlO-8shG3n_8fAUz_bhNcWd5-Zk3oa56iZeGwgGqaW7nBr0MZfSnguAt4gRb0/s1600/gallery1.png);
background-color: white;
}
#center{
position: absolute;
top:49.5%;
left:0px;
width:100%;
height:1%;
background-color: black;
}
#copyright{
position: absolute;
top:5px;
left:0px;
width:100%;
height:10%;
text-align: center;
color:black;
}
#copyright a{
color: black;
text-decoration: none;
}
</style>
<script>
function menu(){
var opt1 = document.getElementById("option1");
var opt2 = document.getElementById("option2");
var opt3 = document.getElementById("option3");
var opt4 = document.getElementById("option4");
var menu = document.getElementById("menu");
if(opt3.style.top=="55%")
{
opt4.style.top="55%";
opt4.style.left="52.5%";
}
if(opt2.style.top=="33.5%")
{
opt3.style.top="55%";
opt3.style.left="41%";
}
else if(opt1.style.top=="33.5%")
{
opt2.style.top="33.5%";
opt2.style.left="52.5%";
}
else{
opt1.style.top="33.5%";
opt1.style.left="41%";
}
if(menu.style.zIndex!="20")
{
menu.style.width="90px";
menu.style.height="90px";
menu.style.zIndex="20";
}
else{
menu.style.width="100px";
menu.style.height="100px";
}
setTimeout("menu()",100);
}
function menuClose(){
}
</script>
</html>
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
 Here'...){kind=link}
0 comments: