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. 
    Tutorial To Design Animated Navigation Menu Using CSS And HTML. Tutorial To Design Animated Navigation Menu Using CSS And HTML. Reviewed by Newstechcafe on April 24, 2015 Rating: 5

    No comments:

    Featured Posts

    Powered by Blogger.