Post
Ask Question

Create Interactive Round Button Menu Using HTML5

Introduction

 
In this article, we will learn how to create an interactive round button menu using HTML5 and CSS tools. Now we will also learn how to set an image background in an interactive round button menu page using a CSS. We will begin with a small discussion of HTML. HTML is an acronym for "HyperText Markup Language" used to display data in a browser. HTML5 is an advanced version of HTML used to develop multimedia and animated applications. In an article we used a CSS part; CSS is a "Cascading Style Sheet" used for design purposes in applications. I hope this article helps to show how to create interactive round button menus using HTML5 and CSS tools. If you are interested in developing interactive round button menu applications then go through the following steps.
 
Step 1: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Menu.aspx".
new.gif
 
webapplication.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 "Round.html".
css.gif
 
html.gif
 
Step 3: In this step, we add a CSS file named StyleSheet3.css. In the CSS we set font-family, font-size, position, height, the width of the interactive round button menu page. 
  • Right-click on the Solution Explorer.
  • Add-> Add New Item.
  • Add the style sheet.
  • Set the name of the style sheet is a "StyleSheet3.css".  
css.gif
 
css2.gif
 
Code
  1. .ca-icon  
  2. {  
  3.     font-family: 'WebSymbolsRegular';  
  4.     font-size: 40px;  
  5.     color: #f6f6f6;  
  6.     line-height: 60px;  
  7.     position: absolute;  
  8.     width: 100%;  
  9.     height: 60px;  
  10.     left: 0px;  
  11.     top: 30px;  
  12.     text-align: center;  
  13. }  
  14. .ca-main  
  15. {  
  16.     font-size: 24px;  
  17.     position: absolute;  
  18.     top: 110px;  
  19.     height: 80px;  
  20.     width: 170px;  
  21.     left: 50%;  
  22. }  
Step 4: In this step we add a folder named "image" that is used to store all images. The images are used to set a background of an interactive round button menu page.
  • Right-click on the Solution Explorer.
  • Add-> Add New Folder.
  • Set the name of the folder is an "image".  
folder.gif
 
image.gif
 
image add.gif
 
Step 5:  In this section, we set the content and color of the body of an interactive round button menu.
 
Code
  1. <body background="image/orange-dots.png">  
  2.     <h1 align="center" style="background-color: #00FFCC">Tom Developed CSS3 Animation Menus  
  3.   
  4.     
  5.         <span style="background-color: #66FFCC">Using HTML5 & CSS</span>  
  6.     </h1>  
  7.     <div class="content">  
  8.         <div class="more"></div>  
  9.         <ul class="ca-menu" style="background-color: #FF99CC">  
  10.             <li>  
  11.                 <a href="#" style="background-color: #FFCCFF">  
  12.                     <span class="ca-icon">M</span>  
  13.                     <div class="ca-content">  
  14.                         <h2 class="ca-main" style="background-color: #66CCFF">Home</h2>  
  15.                         <h3 class="ca-sub">About Us</h3>  
  16.                     </div>  
  17.                 </a>  
  18.             </li>  
  19.             <li>  
  20.                 <a href="#" style="background-color: #FFCCFF">  
  21.                     <span class="ca-icon">A</span>  
  22.                     <div class="ca-content">  
  23.                         <h2 class="ca-main" style="background-color: #66CCFF">Contect Us</h2>  
  24.                         <h3 class="ca-sub">Jobs</h3>  
  25.                     </div>  
  26.                 </a>  
  27.             </li>  
  28.             <li>  
  29.                 <a href="#" style="background-color: #FFCCFF">  
  30.                     <span class="ca-icon" id="heart">N</span>  
  31.                     <div class="ca-content">  
  32.                         <h2 class="ca-main" style="background-color: #66CCFF">Tranning</h2>  
  33.                         <h3 class="ca-sub"></h3>  
  34.                     </div>  
  35.                 </a>  
  36.             </li>  
  37.             <li>  
  38.                 <a href="#" style="background-color: #FFCCFF">  
  39.                     <span class="ca-icon">I</span>  
  40.                     <div class="ca-content">  
  41.                         <h2 class="ca-main" style="background-color: #66CCFF">Career</h2>  
  42.                         <h3 class="ca-sub">Adverties</h3>  
  43.                     </div>  
  44.                 </a>  
  45.             </li>  
  46.             <li>  
  47.                 <a href="#" style="background-color: #FFCCFF">  
  48.                     <span class="ca-icon">S</span>  
  49.                     <div class="ca-content">  
  50.                         <h2 class="ca-main" style="background-color: #66CCFF">Certifications</h2>  
  51.                         <h3 class="ca-sub">Resources</h3>  
  52.                     </div>  
  53.                 </a>  
  54.             </li>  
  55.         </ul>  
  56.     </div>  
  57. </body> 
body.gif
 
Step 6:  Now in this section we apply a style on a mouse hover event that performs the functionality when the user clicks on a text button; after that change a text menu presentation.
 
Code
  1. .ca-menu  
  2. {  
  3.    color: #000;  
  4.    font-size: 60px;  
  5.    text-shadow: 0px 0px 1px #000;  
  6. }  
  7. .ca-menu  
  8. {  
  9.    color: #000;   
  10. } 
mouse.gif
 
Step 7:  In this section, we set a demo of a code interactive round button menu application that is given below.
 
Code
  1. <html>  
  2.     <head>  
  3.         <title>Creative CSS3 Animation Menus</title>  
  4.         <link rel="stylesheet" type="text/css" href="StyleSheet3.css" />  
  5.     </head>  
  6.     <body background="image/orange-dots.png">  
  7.         <h1 align="center" style="background-color: #00FFCC">Tom Developed CSS3 Animation Menus  
  8.   
  9.     
  10.             <span style="background-color: #66FFCC">Using HTML5 & CSS</span>  
  11.         </h1>  
  12.         <div class="content">  
  13.             <div class="more"></div>  
  14.             <ul class="ca-menu" style="background-color: #FF99CC">  
  15.                 <li>  
  16.                     <a href="#" style="background-color: #FFCCFF">  
  17.                         <span class="ca-icon">M</span>  
  18.                         <div class="ca-content">  
  19.                             <h2 class="ca-main" style="background-color: #66CCFF">Home</h2>  
  20.                             <h3 class="ca-sub">About Us</h3>  
  21.                         </div>  
  22.                     </a>  
  23.                 </li>  
  24.                 <li>  
  25.                     <a href="#" style="background-color: #FFCCFF">  
  26.                         <span class="ca-icon">A</span>  
  27.                         <div class="ca-content">  
  28.                             <h2 class="ca-main" style="background-color: #66CCFF">Contect Us</h2>  
  29.                             <h3 class="ca-sub">Jobs</h3>  
  30.                         </div>  
  31.                     </a>  
  32.                 </li>  
  33.                 <li>  
  34.                     <a href="#" style="background-color: #FFCCFF">  
  35.                         <span class="ca-icon" id="heart">N</span>  
  36.                         <div class="ca-content">  
  37.                             <h2 class="ca-main" style="background-color: #66CCFF">Tranning</h2>  
  38.                             <h3 class="ca-sub"></h3>  
  39.                         </div>  
  40.                     </a>  
  41.                 </li>  
  42.                 <li>  
  43.                     <a href="#" style="background-color: #FFCCFF">  
  44.                         <span class="ca-icon">I</span>  
  45.                         <div class="ca-content">  
  46.                             <h2 class="ca-main" style="background-color: #66CCFF">Career</h2>  
  47.                             <h3 class="ca-sub">Adverties</h3>  
  48.                         </div>  
  49.                     </a>  
  50.                 </li>  
  51.                 <li>  
  52.                     <a href="#" style="background-color: #FFCCFF">  
  53.                         <span class="ca-icon">S</span>  
  54.                         <div class="ca-content">  
  55.                             <h2 class="ca-main" style="background-color: #66CCFF">Certifications</h2>  
  56.                             <h3 class="ca-sub">Resources</h3>  
  57.                         </div>  
  58.                     </a>  
  59.                 </li>  
  60.             </ul>  
  61.         </div>  
  62.     </body>  
Step 8:  Press Ctrl + F5 to run an application in a browser.
 
Output
 
out.gif
 
out1.gif
 
out22.gif
 
out3.gif
 
Resources
 
Here are some useful resources


Similar Articles