slider

Recent

Powered by Blogger.

Featured post

Share Blog Posts Automatically on Facebook,Twiiter and other Social Networks

If you think writing a blog post is over when you hit the publish button, Hello I think you should take a shower. Blog posts, (no matter h...

Search This Blog

Blog Archive

My Blog List

Text Widget

1
2
3
Navigation

Tutorial To Design Animated Navigation Menu Using CSS And HTML.

Tutorial To Design Animated Navigation Menu Using CSS And HTML.

In this tutorial we will create a Full Animated Navigation Menu using complete CSS and HTML.

To create a Full Animated Navigation Menu using CSS and HTML it takes only two steps:-
  1. Make a HTML file and define markup for Navigation Menu
  2. Make a CSS file and define styling for Navigation Menu
Tutorial To Design Animated Navigation Menu Using CSS And HTML.
Tutorial To Design Animated Navigation Menu Using CSS And HTML.

    Step 1.Make a HTML file and define markup for Animated Navigation Menu
    We make a HTML file and save it with a name menu.html
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="menu_style.css">
    </head>

    <body>
    <ul>
    <li>
    <a href="#">Home</a>
    </li>

    <li>
    <a href="#">About</a>
    </li>

    <li>
    <a href="#">Contact</a>
    </li>

    <li>
    <a href="#">Help</a>
    </li>

    <li>
    <a href="#">Feedback</a>
    </li>

    </ul>
    </body>
    </html>

    Step 2.Make a CSS file and define styling for Animated Navigation Menu
    We make a CSS file and save it with name menu_style.css

    body
    {
    background-color:#E6E6E6;
    }
    ul
    {
    padding:0px;
    width:995px;
    background-color:#848484;
    float:left;
    margin-top:20px;
    border-radius:5px;
    box-shadow:0px 0px 10px 0px silver;
    }
    li
    {
    float:left;
    width:100px;
    height:35px;
    padding:10px;
    line-height:35px;
    border-right:1px solid #A4A4A4;
    }
    li:last-child
    {
    border-right:0px;
    }
    a
    {
    display:block;
    text-decoration:none;
    color:white;
    font-family: 'WebSymbolsRegular', cursive;
    }
    li:hover
    {
    width:200px;
    text-align:center;
    border-radius:5px;
    background-color:#BDBDBD;
    box-shadow:inset 0px 0px 50px 2px #848484;
    -webkit-transform:scale(1,1.2);
    -ms-transform:scale(1,1.2);
    transform:scale(1,1.2);

    -webkit-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    }
    li:hover a
    {
    font-size:23px;
    color:#424242;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);

    -webkit-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    }
     
    In this step we use CSS3 properties to create animation like transform and transition

    Thats all, this is how to create a Animated navigation Menu using CSS and HTML.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial. 
    Share
    Banner

    Newstechcafe

    Post A Comment:

    0 comments: