roundCube

Showing posts with label Code Snippet. Show all posts

Modal V3.0

Have a look at template by us: METROCITY

Here's the code snippet:

<!DOCTYPE html>

<head>

<title>Modal V3.0 By roundCube</title>

</head>

<body>

<h2>Open Modal</h2></div>

</Div>

<div id="modalText"><h1>Hey There!</h1>

<p>Type Random Stuff here</p>

</div>

<div id="modalButton"><h3>Enter The Website</h3></div>

</Div>

</div>

<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</a></p></div>

</body>

<style>

#container{

position: absolute;

top:0px;

left:0px;

height:100%;

width: 100%;

background-image: url(http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg);

background-size: 100% 100%;

}

#button{

position: absolute;

top:27%;

left:43%;

height:50px;

width:200px;

font-family: sans-serif;

-webkit-transition:all 0.7s ease;

color: white;

border-style: solid;

border-color: white;

border-width: 5px;

text-align: center;

}

#copyright{

position: absolute;

top:0px;

height:6%;

left:0px;

width:100%;

text-align: center;

}

#copyright a{

color:white;

text-decoration: none;

}

#button:hover{

background-color: white;

color: black;

cursor: pointer;

}

#modal{

position: absolute;

top:10%;

height:400px;

width:500px;

background-color: rgba(235, 235, 235, 0.9);

left:35%;

visibility: hidden;

opacity:0;

border-radius: 5px;

box-shadow: 1px 1px black;

-webkit-transition:all 0.7s ease;

}

#closeButton{

position: absolute;

top:0px;

left:5%;

height:65px;

width:65px;

background-color: #645e5e;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

cursor: pointer;

}

#modalText{

text-align: center;

position: absolute;

top:15%;

left:10%;

width:80%;

height:60%;

color: gray;

font-family: sans-serif;

}

#modalText h1{

font-size: 50px;

}

#cross1{

position: absolute;

top:9px;

left:30.5px;

height:40px;

width:6px;

background-color: white;

transform: rotate(45deg);

-webkit-transition:all 0.3s ease;

box-shadow: 1px 1px rgba(0,0,0,0.3);

}

#cross2{

position: absolute;

top:9px;

right:30.5px;

height:40px;

width:6px;

background-color: white;

transform: rotate(-45deg);

-webkit-transition:all 0.3s ease;

box-shadow: 1px 1px rgba(0,0,0,0.3);

}

#closeButton:hover #cross1{

transform: rotate(-45deg);

}

#closeButton:hover #cross2{

transform: rotate(45deg);

}

#modalButton{

position: absolute;

bottom:10%;

height:50px;

left:32.5%;

width:35%;

border-color: gray;

border-width: 3px;

border-style:solid;

text-align: center;

-webkit-transition:all 0.5s ease;

cursor: pointer;

font-family: sans-serif;

color: gray;

}

#modalButton:hover{

background-color: gray;

color:white;

}

</style>

function openModal(){

var modal=document.getElementById("modal");

var button=document.getElementById("button");

modal.style.opacity="1";

modal.style.visibility="visible";

button.style.opacity="0";

}

function closeModal(){

var modal=document.getElementById("modal");

var button=document.getElementById("button");

modal.style.opacity="0";

modal.style.visibility="hidden";

button.style.opacity="1";

}

</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

https://www.facebook.com/roundCubeInc

If you like our work please don't remove the hyperlink to our Facebook page.

Modal With Video Support

Note: Don't forget to replace video/hello.mp4 & video/hello.ogg in the code with the link to your files.

Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal With Video By roundCube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body onload="animate()">
<div id="button" onclick="openModal()"><h2 style="text-align:center;">Click Me</h2></div>
<div id="modal">
<div id="close" onclick="closeModal()">
<div id="line1"></div>
<div id="line2"></div>
</div>
<div id="modalTop">
<video id='videoPlayer' style="height:100%;width:100%" controls autoplay>
<source id='mp4Source' src="video/hello.mp4" type="video/mp4" />
<source id='oggSource' src="video/hello.ogg" type="video/ogg" />
</video>
</div>
<div id="modalPartition">
<Div id="partitionArrow"></Div>
<div id="partitionButton">
<button class="btn btn-success btn-block"><b>Enter Website</b></button>
</div>
</div>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</a></p></div>

</body>

<style>
#button{
position: absolute;
top:40%;
left:43%;
height:10%;
width:14%;
background-color:orange;
-webkit-transition:all 0.25s ease-in;
-moz-transition:all 0.25s ease-in 0s;
border-radius: 5px;
color: white;
border-bottom-width: 9px;
border-bottom-style: ridge;
border-bottom-color: orangered;
cursor: pointer;
cursor: hand;
}

#button:hover{
background-color: #ffba3d;
border-bottom-color: #ff5819;
}

#modal{
position: absolute;
top:50%;
left:50%;
height:0px;
width:0px;
background-color: rgb(230,98,73);
border-style:solid;
border-color:rgb(230,98,73);
border-radius: 7px;
border-width:0px;
opacity: 0;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
box-shadow: -8px 8px rgba(0,0,0,0.2);

}

#close{
position: absolute;
top:-20px;
right:-20px;
height:40px;
width:40px;
border-radius: 50%;
border-style: solid;
border-color: rgb(230,98,73);
border-width: 2px;
cursor: pointer;
cursor: hand;
background-color: white;
box-shadow: -4px 4px black;
box-shadow: -4px 4px rgba(0,0,0,0.5);
}

#line1{
position: absolute;
top:10%;
height: 80%;
left: 45%;
width:10%;
background-color: black;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari */
transform: rotate(30deg);
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease 0s;
}

#line2{
position: absolute;
top:10%;
height: 80%;
left: 45%;
width:10%;
background-color: black;
-ms-transform: rotate(-39deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari */
transform: rotate(-30deg);
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease 0s;
}

#copyright{
position: absolute;
top:0px;
height:6%;
left:0px;
width:100%;
text-align: center;
}

#copyright a{
color:black;
}

#close:hover #line1{
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
opacity: 0.7;
}

#close:hover #line2{
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate-(45deg); /* Safari */
transform: rotate(-45deg);
opacity: 0.7;
}

#success{
position: absolute;
top:10%;
left:40.5%;
height:100px;
width:100px;
border-radius: 50%;
background-image: url(http://jkjautomotive.com/img/tick.png);
background-size: 60% 60%;
background-position: center;
background-color: white;
background-repeat: no-repeat;
}

#modalTop{
position: absolute;
top:5%;
left:5%;
height:60%;
width:90%;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}

#modalPartition{
position: absolute;
bottom:0px;
left:0px;
height:30%;
width:100%;
background-color: white;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}

#modalText{
position: absolute;
top:38%;
height:25%;
width:100%;
left:0%;
text-align: center;
color:white;
}

#partitionArrow{
position: absolute;
left:48%;
width:20px;
top:-10px;
height:20px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate-(45deg); /* Safari */
transform: rotate(-45deg);
background-color: rgb(230,98,73);
}

#partitionButton{
position: absolute;
top:30%;
left:30%;
width:40%;
height:60%;

}

.btn-block{
background-color: rgb(230,98,73);
border-color: rgb(230,98,73);
}

.btn-block:hover{
background-color: rgb(212,90,67);
border-color: rgb(212,90,67);
}

</style>

<script>
function openModal(){
var modal = document.getElementById("modal");

modal.style.top="10%";
modal.style.height="65%";
modal.style.left="32.5%";
modal.style.width="35%";
modal.style.borderWidth="2px";
modal.style.opacity="1";
}

function closeModal(){
var modal = document.getElementById("modal");

modal.style.top="50%";
modal.style.height="0%";
modal.style.left="50%";
modal.style.width="0%";
modal.style.borderWidth="0px";
modal.style.opacity="0";
}

function animate(){
var button = document.getElementById("button");

if(button.style.top!="43%"){
button.style.top="43%";
}
else{
button.style.top="40%";
}

setTimeout("animate()",320);
}
</script>

</html>

Animated Modal

Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal V2.0 By roundCube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body onload="animate()">
<div id="button" onclick="openModal()"><h2 style="text-align:center;">Click Me</h2></div>
<div id="modal">
<div id="close" onclick="closeModal()">
<div id="line1"></div>
<div id="line2"></div>
</div>
<div id="success"></div>
<div id="modalText"><h2><b>Awesome!</b></h2>
<p>Write Something here maybe?</p>
</div>
<div id="modalPartition">
<Div id="partitionArrow"></Div>
<div id="partitionButton">
<button class="btn btn-success btn-block"><b>START something</b></button>
</div>
</div>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</a></p></div>

</body>

<style>
#button{
position: absolute;
top:40%;
left:43%;
height:10%;
width:14%;
background-color:orange;
-webkit-transition:all 0.25s ease-in;
-moz-transition:all 0.25s ease-in 0s;
border-radius: 5px;
color: white;
border-bottom-width: 9px;
border-bottom-style: ridge;
border-bottom-color: orangered;
cursor: pointer;
cursor: hand;
}

#button:hover{
background-color: #ffba3d;
border-bottom-color: #ff5819;
}

#modal{
position: absolute;
top:50%;
left:50%;
height:0px;
width:0px;
background-color: rgb(230,98,73);
border-style:solid;
border-color:rgb(230,98,73);
border-radius: 7px;
border-width:0px;
opacity: 0;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
box-shadow: -8px 8px rgba(0,0,0,0.2);

}

#close{
position: absolute;
top:-20px;
right:-20px;
height:40px;
width:40px;
border-radius: 50%;
border-style: solid;
border-color: rgb(230,98,73);
border-width: 2px;
cursor: pointer;
cursor: hand;
background-color: white;
box-shadow: -4px 4px black;
box-shadow: -4px 4px rgba(0,0,0,0.5);
}

#line1{
position: absolute;
top:10%;
height: 80%;
left: 45%;
width:10%;
background-color: black;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari */
transform: rotate(30deg);
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease 0s;
}

#line2{
position: absolute;
top:10%;
height: 80%;
left: 45%;
width:10%;
background-color: black;
-ms-transform: rotate(-39deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari */
transform: rotate(-30deg);
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease 0s;
}

#copyright{
position: absolute;
top:0px;
height:6%;
left:0px;
width:100%;
text-align: center;
}

#copyright a{
color:black;
}

#close:hover #line1{
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
opacity: 0.7;
}

#close:hover #line2{
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate-(45deg); /* Safari */
transform: rotate(-45deg);
opacity: 0.7;
}

#success{
position: absolute;
top:10%;
left:40.5%;
height:100px;
width:100px;
border-radius: 50%;
background-image: url(http://jkjautomotive.com/img/tick.png);
background-size: 60% 60%;
background-position: center;
background-color: white;
background-repeat: no-repeat;
}

#modalPartition{
position: absolute;
bottom:0px;
left:0px;
height:30%;
width:100%;
background-color: white;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}

#modalText{
position: absolute;
top:38%;
height:25%;
width:100%;
left:0%;
text-align: center;
color:white;
}

#partitionArrow{
position: absolute;
left:48%;
width:20px;
top:-10px;
height:20px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate-(45deg); /* Safari */
transform: rotate(-45deg);
background-color: rgb(230,98,73);
}

#partitionButton{
position: absolute;
top:30%;
left:30%;
width:40%;
height:60%;

}

.btn-block{
background-color: rgb(230,98,73);
border-color: rgb(230,98,73);
}

.btn-block:hover{
background-color: rgb(212,90,67);
border-color: rgb(212,90,67);
}

</style>

<script>
function openModal(){
var modal = document.getElementById("modal");

modal.style.top="10%";
modal.style.height="65%";
modal.style.left="32.5%";
modal.style.width="35%";
modal.style.borderWidth="2px";
modal.style.opacity="1";
}

function closeModal(){
var modal = document.getElementById("modal");

modal.style.top="50%";
modal.style.height="0%";
modal.style.left="50%";
modal.style.width="0%";
modal.style.borderWidth="0px";
modal.style.opacity="0";
}

function animate(){
var button = document.getElementById("button");

if(button.style.top!="43%"){
button.style.top="43%";
}
else{
button.style.top="40%";
}

setTimeout("animate()",320);
}
</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

https://www.facebook.com/roundCubeInc

If you like our work please don't remove the hyperlink to our Facebook page.

Menu with block animation and responsiveness

Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Blocks Menu By roundCube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="container">
<div id="button" onclick="openMenu()"><h3>Menu</h3><div id="menu1"></div><div id="menu2"></div><div id="menu3"></div></div>
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
<div id="block6"></div>
<div id="block7"></div>
<div id="block8"></div>
<div id="block9"></div>
<div id="block10"></div>
<div id="block11"></div>
<div id="block12"></div>
<div id="menu">
<a href="#"><h1>Home</h1></a>
<a href="#"><h1>About</h1></a>
<a href="#" id="AlphaMoreThenEight"><h1>Portfolio</h1></a>
<a href="#" id="AlphaMoreThenEight"><h1>Contact Us</h1></a>
</div>
<div id="buttonOverMenu" onclick="closeMenu()"><h3>Menu</h3>
<div id="menu4"></div>
<div id="menu5"></div>
<div id="menu6"></div>
</div>

<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube</a></div>
</div>

</body>
<style>

#container{
position: absolute;
top:0%;
left:0%;
height: 100%;
width: 100%;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6c/Looking_Up_at_Empire_State_Building.JPG);
background-size: 100% 100%;
}
#button{
position: absolute;
top:4%;
left:4%;
height:40px;
width:130px;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
font-size: 18px;
font-family: arial,sans-serif;
text-align: right;
line-height: 0;
cursor: pointer;
cursor: hand;
}
#buttonOverMenu{
position: absolute;
top:4%;
left:4%;
height:40px;
width:130px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
font-size: 18px;
font-family: arial,sans-serif;
text-align: right;
color: white;
line-height: 0;
cursor: pointer;
cursor: hand;

}

#menu1{
position: absolute;
top:0%;
left:0%;
height:10%;
width:30%;
background-color: black;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
}

#menu2{
position: absolute;
top:45%;
left:0%;
height:10%;
width:30%;
background-color: black;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
}

#menu3{
position: absolute;
bottom:0%;
left:0%;
height:10%;
width:30%;
background-color: black;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
}

#button:hover #menu1{
height:80%;
top:10%;
left:12%;
width:3%;

}

#button:hover #menu2{
height:80%;
top:10%;
left:12%;
width:3%;

}
#button:hover #menu3{
height:80%;
top:10%;
left:12%;
width:3%;

}

#menu4{
position: absolute;
top:10%;
left:12%;
height:80%;
width:3%;
background-color: white;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
}

#copyright{
position:absolute;
bottom:2px;
height:20px;
left:0px;
width:100%;
text-align:center;
}

#copyright a{
text-decoration:none;
color:white;
opacity: 0.7;
background-image: none;
font-size: 19px;

}

#menu5{
position: absolute;
top:10%;
left:12%;
height:80%;
width:3%;
background-color: white;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
}
#menu6{
position: absolute;
top:10%;
left:12%;
height:80%;
width:3%;
background-color: white;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
}

#buttonOverMenu:hover #menu4{
top:0%;
left:0%;
height:10%;
width:30%;
}

#buttonOverMenu:hover #menu5{
top:45%;
left:0%;
height:10%;
width:30%;
}

#buttonOverMenu:hover #menu6{
top:90%;
left:0%;
height:10%;
width:30%;
}

#block1{
position: absolute;
top:0%;
left:0%;
height:33%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition : all 0.3s ease 0s;
}

#block2{
position: absolute;
top:0%;
left:25%;
height:33%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.6s ease;
-moz-transition : all 0.6s ease 0s;
}

#block3{
position: absolute;
top:0%;
left:50%;
height:33%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.9s ease;
-moz-transition : all 0.9s ease 0s;
}

#block4{
position: absolute;
top:0%;
left:75%;
height:33%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1.2s ease;
-moz-transition : all 1.2s ease 0s;
}

#block5{
position: absolute;
top:33%;
left:0%;
height:33%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.6s ease;
-moz-transition : all 0.6s ease 0s;
}

#block6{
position: absolute;
top:33%;
left:25%;
height:33%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.9s ease;
-moz-transition : all 0.9s ease 0s;
}

#block7{
position: absolute;
top:33%;
left:50%;
height:33%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1.2s ease;
-moz-transition : all 1.2s ease 0s;
}

#block8{
position: absolute;
top:33%;
left:75%;
height:33%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1.5s ease;
-moz-transition : all 1.5s ease 0s;
}

#block9{
position: absolute;
top:66%;
left:0%;
height:34%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.9s ease;
-moz-transition : all 0.9s ease 0s;
}

#block10{
position: absolute;
top:66%;
left:25%;
height:34%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1.2s ease;
-moz-transition : all 1.2s ease 0s;
}

#block11{
position: absolute;
top:66%;
left:50%;
height:34%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1.5s ease;
-moz-transition : all 1.5s ease 0s;
}

#block12{
position: absolute;
top:66%;
left:75%;
height:34%;
width:25%;
background-color: black;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1.8s ease;
-moz-transition : all 1.8s ease 0s;
}

#menu{
position: absolute;
top:15%;
height:55%;
left:10%;
width:80%;
font-family: arial,sans-serif;
font-size: 25px;
text-align: center;
color:white;
opacity: 0;
visibility: hidden;
text-transform: uppercase;

}

a{
color: white;
text-decoration: none;
}

a:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSN2izdNQITeEPWYPh6sO0Ive96excSud9N4COMaSckM8ppS1CR4LyRLci_s-jDTFkaJ4R4D5GwAUukmiZFPFxDdFgYqOUQ4Tj3DnpotLT-c7yWjMYHaWtPoYUAnxkDS4hr1g9Me9ECt0/s1600/brush+stroke.png);
background-size: 32% 140%;
background-position: center;
background-repeat: no-repeat;
display: block;
}

#AlphaMoreThenEight:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSN2izdNQITeEPWYPh6sO0Ive96excSud9N4COMaSckM8ppS1CR4LyRLci_s-jDTFkaJ4R4D5GwAUukmiZFPFxDdFgYqOUQ4Tj3DnpotLT-c7yWjMYHaWtPoYUAnxkDS4hr1g9Me9ECt0/s1600/brush+stroke.png);
background-size: 46% 180%;
background-position: center;
background-repeat: no-repeat;
display: block;
}

@media only screen and (max-width:858px)
{
#menu{
font-size: 20px;
}
}

@media only screen and (max-width:762px)
{
#menu{
font-size: 17px;
}
}
@media only screen and (max-width:599px)
{
#menu{
font-size: 13px;
}
}

@media only screen and (max-width:463px)
{
#menu{
width:95%;
left:2.5%;
}
}

@media only screen and (max-width:402px)
{
a:hover{
background-size: 40% 140%;
}
#AlphaMoreThenEight:hover{
background-size: 55% 180%;
}
}

</style>

<script>
function openMenu(){
var b1=document.getElementById("block1");
var b2=document.getElementById("block2");
var b3=document.getElementById("block3");
var b4=document.getElementById("block4");
var b5=document.getElementById("block5");
var b6=document.getElementById("block6");
var b7=document.getElementById("block7");
var b8=document.getElementById("block8");
var b9=document.getElementById("block9");
var b10=document.getElementById("block10");
var b11=document.getElementById("block11");
var b12=document.getElementById("block12");
var menu=document.getElementById("menu");
var button=document.getElementById("buttonOverMenu");

menu.style.visibility="visible";
menu.style.opacity="1";

b1.style.visibility="visible";
b1.style.opacity="1";
b2.style.visibility="visible";
b2.style.opacity="1";
b3.style.visibility="visible";
b3.style.opacity="1";
b4.style.visibility="visible";
b4.style.opacity="1";
b5.style.visibility="visible";
b5.style.opacity="1";
b6.style.visibility="visible";
b6.style.opacity="1";
b7.style.visibility="visible";
b7.style.opacity="1";
b8.style.visibility="visible";
b8.style.opacity="1";
b9.style.visibility="visible";
b9.style.opacity="1";
b10.style.visibility="visible";
b10.style.opacity="1";
b11.style.visibility="visible";
b11.style.opacity="1";
b12.style.visibility="visible";
b12.style.opacity="1";
button.style.visibility="visible";
button.style.opacity="1";

}

function closeMenu(){
var b1=document.getElementById("block1");
var b2=document.getElementById("block2");
var b3=document.getElementById("block3");
var b4=document.getElementById("block4");
var b5=document.getElementById("block5");
var b6=document.getElementById("block6");
var b7=document.getElementById("block7");
var b8=document.getElementById("block8");
var b9=document.getElementById("block9");
var b10=document.getElementById("block10");
var b11=document.getElementById("block11");
var b12=document.getElementById("block12");
var menu=document.getElementById("menu");
var buttontop=document.getElementById("buttonOverMenu");
var button=document.getElementById("button");

menu.style.visibility="hidden";
menu.style.opacity="0";

b1.style.visibility="hidden";
b1.style.opacity="0";
b2.style.visibility="hidden";
b2.style.opacity="0";
b3.style.visibility="hidden";
b3.style.opacity="0";
b4.style.visibility="hidden";
b4.style.opacity="0";
b5.style.visibility="hidden";
b5.style.opacity="0";
b6.style.visibility="hidden";
b6.style.opacity="0";
b7.style.visibility="hidden";
b7.style.opacity="0";
b8.style.visibility="hidden";
b8.style.opacity="0";
b9.style.visibility="hidden";
b9.style.opacity="0";
b10.style.visibility="hidden";
b10.style.opacity="0";
b11.style.visibility="hidden";
b11.style.opacity="0";
b12.style.visibility="hidden";
b12.style.opacity="0";
buttontop.style.visibility="hidden";
buttontop.style.opacity="0";
button.style.visibility="visible";
button.style.opacity="1";

}

</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

https://www.facebook.com/roundCubeInc

If you like our work please don't remove the hyperlink to our Facebook page.

Animated Menu

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 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

https://www.facebook.com/roundCubeInc

If you like our work please don't remove the hyperlink to our Facebook page.

Slide-in Animated Menu

Here's the code Snippet:

<!DOCTYPE html>

<head>

<title>Slide-in Menu By roundCube</title>

</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>

</br></br></br></br>

<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>

<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;

}

color: white;

text-decoration: none;

}

</style>

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

https://www.facebook.com/roundCubeInc

If you like our work please don't remove the hyperlink to our Facebook page.

roundCube

Find Us On Fiverr

Labels

Popular Posts

roundCube

Follow Us

Find Us On Fiverr

Labels

Popular Posts