Create an Animated Menu Using HTML5


Introduction

This is a simple application for beginners that shows how to create an animated menu using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop animated menu applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of a HTML 5 that is used to show the image and text in a HTML 5 applications. I hope this article helps to develop a animated menu using HTML 5 and CSS tools.

Step 1: Open Visual Studio.

  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "menu.aspx".

1.gif

2.gif

Step 2:
Add a HTML file to your web application.

  • Right-click on the Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "animated.html".

3.gif

4.gif

Step 3:
In this step we create a folder named "image"; after that save some images in a folder. This folder is used to set a background of an application.

  • Right-click on the Solution Explorer.
  • Add-> New Folder.
  • Set the name of the folder to "image"  

5.gif

6.gif

7.gif

8.gif

Step 4:
  Now in this step we create a Rib that is used to create an architecture of an animated menu. In a Rib class we set some CSS properties; they are padding, margin, text-alignment, position, display etc.

Code

  .Rib

    {

      display:inline-block;

      }

    .Rib:after, .Rib:before
     {

     margin-top:0.5em;

     content: "";

     float:left;

     border:1.5em solid #ff99ff;

       }

    .Rib:after

     {

     border-right-color:Blue;

      }

   .Rib:before
     {

    border-left-color:Lime;

      }

   .Rib a:link, .Rib a:visited
    {

    color:Green;

    text-decoration:none;

    float:left;

    height:3.5em;

    overflow:hidden;

}

  

Step 5:  In this step we set a background image of an animated menu application and set a color of a mouse hover event.

Code

body
  {

  background:url(/image/1.jpg) 0 0 repeat;

  padding:35px 0 0;

  margin:auto;

  text-align:center;

     }

 .Rib a:hover span

    {

  background:Aqua;

  margin-top:0;

 }

 

Step 6:  Now we have set the content of an animated menu.

Code

<body bgcolor="#00ffff">

  <h1>Tom daveloped a animated menu</h1>

  <div class='Rib'>

  <a href='#'><span>Home</span></a>

  <a href='#'><span>Forums</span></a>

  <a href='#'><span>Videos</span></a>

  <a href='#'><span>Adverties</span></a>

  <a href='#'><span>Downlodes</span></a>

  <a href='#'><span>Blogs</span></a>

  <a href='#'><span>Jobs</span></a>

  <a href='#'><span>Training</span></a>

  </div>

</body>

 9.gif

Step 7: 
A sample of an animated menu application code is given below:

 

Code

 

<html>

  <head>

  <title>Tom application</title>

  <style type="text/css">

  * {

   margin:0;

   padding:0;

   } 

body
  {

  background:url(/image/1.jpg) 0 0 repeat;

  padding:35px 0 0;

  margin:auto;

  text-align:center;

  }

.Rib

  {

  display:inline-block;

      }

 .Rib:after, .Rib:before
 {

 margin-top:0.5em;

 content: "";

 float:left;

 border:1.5em solid #ff99ff;

  }

.Rib:after

 {

border-right-color:Blue;

 }

.Rib:before
     {

    border-left-color:Lime;

      }

   .Rib a:link, .Rib a:visited
    {

    color:Green;

    text-decoration:none;

    float:left;

    height:3.5em;

    overflow:hidden;

}

.Rib span:before
   {

   content: "";

   position:absolute;

   top:3em;

   left:0;

   border-right:0.5em solid #9B8651;

   border-bottom:0.5em solid #fff;

     }

 .Rib span:after
   {

   content: "";

   position:absolute;

   top:3em;

   right:0;

   border-left:0.5em solid #9B8651;

   border-bottom:0.5em solid #fff;

 }

  </style>

 </head>

<body bgcolor="#00ffff">

  <h1>Tom daveloped a animated menu</h1>

  <div class='Rib'>

  <a href='#'><span>Home</span></a>

  <a href='#'><span>Forums</span></a>

  <a href='#'><span>Videos</span></a>

  <a href='#'><span>Adverties</span></a>

  <a href='#'><span>Downlodes</span></a>

  <a href='#'><span>Blogs</span></a>

  <a href='#'><span>Jobs</span></a>

  <a href='#'><span>Training</span></a>

  </div>

</body>

</html>

 

Step 8:  Press Ctrl + F5 to run the application in the browser.

Output

 OUT.gif

OUT1.gif

OUT2.gif

OUT3.gif

Resources

Here is some useful resources

Up Next
    Ebook Download
    View all
    Learn
    View all