Responsive & Animated Block Menu

by Unknown 04:16 0 comments
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">&#169; 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

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

Labels:

About author: Usama Moin

I am Usama Moin,author and co-founder of roundCube,I love writing codes and stuff.

0 comments:

Subscribe to: Post Comments (Atom)