 |
| Slide-in Animated Menu |
Here's the code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slide-in Menu By roundCube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="content"><div id="contentInner"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor sit amet neque fermentum eleifend tempus eget enim. In condimentum massa ligula, vitae bibendum lectus posuere a. Ut commodo pretium rhoncus. Praesent lobortis iaculis libero vel sollicitudin. Morbi vitae arcu nibh. Integer feugiat justo sit amet augue mollis, non tristique magna fermentum. Mauris iaculis diam eget metus pretium, nec euismod tortor molestie. Vivamus id posuere sem. Donec condimentum lorem nibh, eget pharetra nisi gravida vel. Sed ac nisl euismod, rhoncus mi at, consequat enim. Ut placerat interdum sem, id finibus lorem rhoncus ac. Ut et quam ultrices, pretium justo dictum, ultrices est. Vivamus a tristique dui, sed dignissim quam.</br></br>
Vivamus cursus massa lectus, ac fringilla eros posuere posuere. Integer aliquam et eros id pulvinar. Ut efficitur pellentesque tellus, at egestas nisi vulputate non. Nam vitae sagittis turpis, vitae facilisis nibh. Donec ac tincidunt nibh. Duis cursus ac felis non vestibulum. Pellentesque in neque ut justo interdum varius. Nullam id ante id mauris cursus cursus. Donec convallis velit sit amet dapibus condimentum. Proin volutpat, dui ac varius tempor, purus magna pulvinar libero, eget aliquet quam neque at lacus.</br></br>
Nunc blandit, tortor vitae semper congue, ligula justo tempor purus, in sollicitudin leo dolor eget leo. Aliquam erat volutpat. Vivamus elementum commodo velit, lacinia pellentesque sem malesuada nec. Sed ac libero nec leo lacinia finibus. Mauris aliquam metus eget sem porttitor, ultricies lacinia lorem aliquam. Donec vel convallis nisi. Nulla facilisi. Nunc quam eros, sagittis vitae tempus eget, venenatis a nunc. Aenean ut eros vulputate, efficitur metus quis, vestibulum urna. Aenean pulvinar sem sed lacus aliquet, ac auctor sem dictum. In orci sem, accumsan et molestie sit amet, ullamcorper et ex.
</p></div></div>
<div id="menu">
</br></br></br></br>
<ul id="nav">
<li><a href="#"><h2>Home</h2></a></li>
<li><a href="#"><h2>About</h2></a></li>
<li><a href="#"><h2>Portfolio</h2></a></li>
<li><a href="#"><h2>Contact</h2></a></li>
</ul>
</div>
<div id="menuButton" onclick="openMenu()"><h1>Menu</h1></div>
<div id="copyright">
<h4>
<a id="copyrightlink" href="http://developer.azeeagency.com">Developed By: roundCube</a>
</h4>
</div>
</body>
<style>
#menuButton{
position: absolute;
top:20px;
left:5%;
height:50px;
width:11%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi62nXV7bk_l-8-BoDwCsZpLYqsCk_oTgOQEImLH5ogSbZO97EK1qcoXeKpT2JjwdKjxOw3jD5VPWDkDY1LLrhX3a5-eUxnSX38y1KWRsKY6PVzhKQsu9j2XQVnsaBTyEhny4NUVVM1Mc/s1600/nav.png);
background-size: 50px 50px;
background-repeat: no-repeat;
padding-left: 55px;
line-height: 0.3;
color: white;
font-family: sans-serif;
text-shadow: 1px 1px black;
cursor: pointer;
}
#copyright{
position: absolute;
left:0px;
width:100%;
height:60px;
bottom:0px;
text-align: center;
font-weight: 400;
}
#copyrightlink{
color:black;
font-family: sans-serif;
font-weight: 400;
}
#content{
position: absolute;
width:100%;
right:0%;
top:0%;
height:100%;
background-color: #d0cece;
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
}
#contentInner{
position: absolute;
top:20%;
height:65%;
left:5%;
width:90%;
}
#menu{
position: absolute;
left:0%;
width:0%;
height:100%;
top:0%;
background-color: darkslategray;
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
}
ul{
list-style-type: none;
padding-left: 0px;
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
font-size: 0px;
}
li{
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
li:hover{
background-color: #404040;
}
a{
color: white;
text-decoration: none;
}
</style>
<script>
function openMenu(){
var menu=document.getElementById("menu");
var content=document.getElementById("content");
var nav=document.getElementById("nav");
if(menu.style.width!="35%")
{
menu.style.width="35%";
content.style.width="65%";
nav.style.fontSize="15px";
}
else{
menu.style.width="0%";
content.style.width="100%";
nav.style.fontSize="0px";
}
}
</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=https://roundcubee.blogspot.com/2015/08/slide-in-menu.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8nrunCYiRsxp-hOEqTWJW9w9WH2VhzD354igGuqOI5XBpDoA5fM9H56X-gX3S_zogNaqOnOQXX2Eg3eR5GViSy1TjhDMNKl4y67zWyKymv4IWB-RauWspDUbav2ulbecYtFtwQi917g/s72-c/slide-in-Menu.png&description= Slide-in Animated Menu Here's the code Snippet: <!DOCTYPE html> <html lang="en"> <head> ...){kind=link}
0 comments: