Showing posts with label menu. Show all posts
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.
Animated Sliding Navigation



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 Sliding Navigation by roundCube</title>

  
 </head>
    
<body>
    <nav>
        <div id="home"><h1>Home</h1></div>
        <div id="about"><h1>About Us</h1></div>
        <div id="portfolio"><h1>Portfolio</h1></div>
        <div id="contact"><h1>Contact Us</h1></div>
    </nav>
         <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div> 
</body>
    
    <style>
        nav{
            position: absolute;
            top:0px;
            left:0px;
            height:100%;
            width:100%;
            background-color: black;
        }
        
        #home{
            position: absolute;
            top:0%;
            height:100%;
            left:0%;
            width:15%;
            background-color: blue;
            -webkit-transition: all 0.4s ease;
            -moz-transition : all 0.4s ease 0s;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            background-image: url(http://img0.mxstatic.com/wallpapers/bec7b6861bd15b4b90dc37dafed13345_large.jpeg);
            background-size: 190% 100%;
            cursor: pointer;
            cursor: hand;
            text-shadow: 2px 2px black;
            text-align: center;
            color:white;
        }
        
        #home:hover{
            width:55%;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            background-size: 100% 100%;
            font-size:40px;
        }
        
        #home:hover ~ #about{
            left:55%;
        }
        
        #home:hover ~ #portfolio{
            left:70%;
        }
        #home:hover ~ #contact{
            left:85%;
        }
        
        #about{
            position: absolute;
            top:0%;
            height:100%;
            left:15%;
            width:15%;
            background-color: blue;
            -webkit-transition: all 0.4s ease;
            -moz-transition : all 0.4s ease 0s;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            background-image: url(http://photofiles.alphacoders.com/236/23693.jpg);
            background-size: 240% 100%;
            cursor: pointer;
            cursor: hand;
            text-shadow: 2px 2px black;
            text-align: center;
            color:white;
        }
        
        #about:hover{
            width:55%;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            background-size: 100% 100%;
            font-size:40px;
        }
        
        #about:hover ~ #portfolio{
            left:70%;
        }
        
        #about:hover ~ #contact{
            left:85%;
        }
        
        #portfolio{
            position: absolute;
            top:0%;
            height:100%;
            left:30%;
            width:15%;
            background-color: blue;
            -webkit-transition: all 0.4s ease;
            -moz-transition : all 0.4s ease 0s;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            background-image: url(http://www.insside.net/img/stock/backgrounds/buildings_blue_bg.jpg);
            background-size: 290% 100%;
            cursor: pointer;
            cursor: hand;
            text-shadow: 2px 2px black;
            text-align: center;
            color:white;
        }
        
        #portfolio:hover{
            width:55%;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            background-size: 100% 100%;
            font-size:40px;
        }
        
        #portfolio:hover ~ #contact{
            left:85%;
        }
        
    #copyright{
        position: absolute;
        bottom:5px;
        left:0px;
        width:100%;
        height:10%;
        text-align: center;
        color:black;
    }
        
    #copyright a{
        color: white;
        text-decoration: none;
        font-size: 18px;
        text-shadow: 1px 1px black;
    }

        
        #contact{
            position: absolute;
            top:0%;
            height:100%;
            left:45%;
            width:15%;
            background-color: blue;
            -webkit-transition: all 0.4s ease;
            -moz-transition : all 0.4s ease 0s;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            background-image: url(http://www.e-architect.co.uk/images/jpgs/london/swiss_re_building_nw080609.jpg);
            background-size: 290% 100%;
            text-shadow: 2px 2px black;
            text-align: center;
            color:white;
            cursor: pointer;
            cursor: hand;
        }
        
        #contact:hover{
            width:55%;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            background-size: 100% 100%;
            font-size:40px;
        }
        
        
    
    </style>
</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.
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">&#169; 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.
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.
JS based circular menu

Related Articles:

 


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">&#169; 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.
Subscribe to: Posts (Atom)