Animated Sliding Navigation

by Unknown 05:49 2 comments
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.


Labels:

About author: Usama Moin

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

2 comments:

Subscribe to: Post Comments (Atom)