 |
| Animated Menu |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Menu by roundCube</title>
</head>
<body>
<div id="menu">
<nav id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi62nXV7bk_l-8-BoDwCsZpLYqsCk_oTgOQEImLH5ogSbZO97EK1qcoXeKpT2JjwdKjxOw3jD5VPWDkDY1LLrhX3a5-eUxnSX38y1KWRsKY6PVzhKQsu9j2XQVnsaBTyEhny4NUVVM1Mc/s1600/nav.png" style="height: 60px;width: 60px;top: 20px;left: 20px;position:absolute;" onclick="menu()" />
</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:3%;
left:46.25%;
width:100px;
height:100px;
background-color: #887c88;
border-radius: 50%;
cursor: pointer;
cursor: hand;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
border-style: none;
border-color:#887c88;
border-width: 4px;
}
nav{
position: absolute;
right:0%;
width:88%;
top:0%;
height:100%;
text-align: right;
font-family: sans-serif;
font-weight: 600;
}
#navigation{
opacity: 0;
-webkit-transition: all 0.47s ease;
-moz-transition : all 0.47s ease 0s;
}
#menu ul li{
display: inline-block;
padding: 25px;
}
ul li a{
text-decoration: none;
color:white;
}
ul li:hover{
-webkit-box-shadow:inset 0px 0px 0px 10px rgba(255,255,255,0.5);
-moz-box-shadow:inset 0px 0px 0px 10px rgba(255,255,255,0.5);
box-shadow:inset 0px 0px 0px 10px rgba(255,255,255,0.5);
border-radius:3px;
}
#copyright{
position: absolute;
bottom:5px;
left:0px;
width:100%;
height:10%;
text-align: center;
color:black;
}
#copyright a{
color: black;
text-decoration: none;
}
</style>
<script>
function menu(){
var menu=document.getElementById("menu");
var navigation=document.getElementById("navigation");
if(menu.style.width!="700px")
{
menu.style.width="700px";
menu.style.borderRadius="8px";
menu.style.left="26%";
navigation.style.opacity="1";
}
else{
menu.style.width="100px";
menu.style.borderRadius="50%";
menu.style.left="46.25%";
navigation.style.opacity="0";
}
}
</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.
![Pinterest](http://pinterest.com/pin/create/button/?url=http://roundcubee.blogspot.com/2015/08/animated-menu.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQ-Fw9iaQnPMkjSmjUW6roC6z0aGbfnXpKwl0COw9tLupIcYBH1INzLbam9KIgcyLVFjdotthhe2FVezA4dB6cEochmo0P0ozf5jJBCfuHLi1dlsYH_qSbBkVVkbAL5-3E75tAI3nU18/s72-c/Animated+Menu.png&description= Animated Menu Here's the code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...){kind=link}
0 comments: