Post
Ask Question

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 an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to develop an animated menu using HTML 5 and CSS tools.
 
Step 1: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "menu.aspx".
1.gif
 
2.gif
 
Step 2: Add an 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
  1. .Rib  
  2.     {  
  3.       display:inline-block;  
  4.       }  
  5.     .Rib:after, .Rib:before  
  6.      {  
  7.      margin-top:0.5em;  
  8.      content: "";  
  9.      float:left;  
  10.      border:1.5em solid #ff99ff;  
  11.        }  
  12.     .Rib:after  
  13.      {  
  14.      border-right-color:Blue;  
  15.       }  
  16.    .Rib:before  
  17.      {  
  18.     border-left-color:Lime;  
  19.       }  
  20.    .Rib a:link, .Rib a:visited  
  21.     {  
  22.     color:Green;  
  23.     text-decoration:none;  
  24.     float:left;  
  25.     height:3.5em;  
  26.     overflow:hidden;  
  27. } 
Step 5:  In this step, we set a background image of an animated menu application and set the color of a mouse hover event.
 
Code
  1. body  
  2.   {  
  3.   background:url(/image/1.jpg) 0 0 repeat;  
  4.   padding:35px 0 0;  
  5.   margin:auto;  
  6.   text-align:center;  
  7.      }  
  8.  .Rib a:hover span  
  9.     {  
  10.   background:Aqua;  
  11.   margin-top:0;  
  12.  } 
Step 6:  Now we have set the content of an animated menu.
 
Code
  1. <body bgcolor="#00ffff">  
  2.   <h1>Tom daveloped a animated menu</h1>  
  3.   <div class='Rib'>  
  4.   <a href='#'><span>Home</span></a>  
  5.   <a href='#'><span>Forums</span></a>  
  6.   <a href='#'><span>Videos</span></a>  
  7.   <a href='#'><span>Adverties</span></a>  
  8.   <a href='#'><span>Downlodes</span></a>  
  9.   <a href='#'><span>Blogs</span></a>  
  10.   <a href='#'><span>Jobs</span></a>  
  11.   <a href='#'><span>Training</span></a>  
  12.   </div>  
  13. </body> 
 
9.gif
 
Step 7:  A sample of an animated menu application code is given below:
 
Code
  1. <html>  
  2.   <head>  
  3.   <title>Tom application</title>  
  4.   <style type="text/css">  
  5.   * {  
  6.    margin:0;  
  7.    padding:0;  
  8.    }   
  9. body  
  10.   {  
  11.   background:url(/image/1.jpg) 0 0 repeat;  
  12.   padding:35px 0 0;  
  13.   margin:auto;  
  14.   text-align:center;  
  15.   }  
  16. .Rib  
  17.   {  
  18.   display:inline-block;  
  19.       }  
  20.  .Rib:after, .Rib:before  
  21.  {  
  22.  margin-top:0.5em;  
  23.  content: "";  
  24.  float:left;  
  25.  border:1.5em solid #ff99ff;  
  26.   }  
  27. .Rib:after  
  28.  {  
  29. border-right-color:Blue;  
  30.  }  
  31. .Rib:before  
  32.      {  
  33.     border-left-color:Lime;  
  34.       }  
  35.    .Rib a:link, .Rib a:visited  
  36.     {  
  37.     color:Green;  
  38.     text-decoration:none;  
  39.     float:left;  
  40.     height:3.5em;  
  41.     overflow:hidden;  
  42. }  
  43. .Rib span:before  
  44.    {  
  45.    content: "";  
  46.    position:absolute;  
  47.    top:3em;  
  48.    left:0;  
  49.    border-right:0.5em solid #9B8651;  
  50.    border-bottom:0.5em solid #fff;  
  51.      }  
  52.  .Rib span:after  
  53.    {  
  54.    content: "";  
  55.    position:absolute;  
  56.    top:3em;  
  57.    right:0;  
  58.    border-left:0.5em solid #9B8651;  
  59.    border-bottom:0.5em solid #fff;  
  60.  }  
  61.   </style>  
  62.  </head>  
  63. <body bgcolor="#00ffff">  
  64.   <h1>Tom daveloped a animated menu</h1>  
  65.   <div class='Rib'>  
  66.   <a href='#'><span>Home</span></a>  
  67.   <a href='#'><span>Forums</span></a>  
  68.   <a href='#'><span>Videos</span></a>  
  69.   <a href='#'><span>Adverties</span></a>  
  70.   <a href='#'><span>Downlodes</span></a>  
  71.   <a href='#'><span>Blogs</span></a>  
  72.   <a href='#'><span>Jobs</span></a>  
  73.   <a href='#'><span>Training</span></a>  
  74.   </div>  
  75. </body>  
  76. </html> 
Step 8:  Press Ctrl + F5 to run the application in the browser.
 
Output
 
OUT.gif
 
OUT1.gif
 
OUT2.gif
 
OUT3.gif
 
Resources
 
Here are some useful resources


Similar Articles