Post
Ask Question

A Fresh Bottom Slide-Out Menu Using HTML5

Introduction

 
This is a simple application for beginners that shows how to create a fresh bottom slide-out menu using HTML 5, JQuery 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 fresh bottom slide-out 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 fresh bottom slide-out menus using HTML 5, JQuery and CSS tools.
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "Button".
wakakakakak.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Tom".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "FreshBottom.aspx".
new.gif
 
webapplication.gif
 
Step 4: Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Bottom.html".
html.gif
 
Step 5: Now in this step we define a CSS file named button.css. In CSS we define all properties of a hover, body and menu class; that is height, width, margin, position, font, color, etc.
 
Code
  1. body  
  2. {  
  3.   font-family: Helvetica, Arial, sans-serif;  
  4.   font-weight: bold;  
  5.   color:Purple;  
  6.   background:#99ff99 url(../title.png) no-repeat center center;  
  7.   height:600px;  
  8.    }  
  9. a.ref  
  10.    {  
  11.   color:Fuchsia;     
  12.   text-decoration:none;    
  13.   text-shadow:1px 1px 1px #000;  
  14.   position:absolute;  
  15.   bottom:10px;  
  16.   right:10px;  
  17.      }  
  18. a.ref:hover  
  19.    {  
  20.   color:Green;  
  21.  }  
  22. ul#menu li  
  23.  {  
  24.   float:left;  
  25.   margin:0px 10px 0px 0px;  
  26.   }  
  27. ul#menu a  
  28.  {  
  29.    cursor:pointer;  
  30.    position:relative;  
  31.    float:left;  
  32.    bottom:-95px;  
  33.    line-height:20px;  
  34.    width:210px;  
  35.  } 
Step 6: Now we define the content of a fresh bottom slide-out menu.
 
Code
  1. <h1>Csharpcorner</h1>  
  2.   <div class="container" style="background-color: #FF99CC">  
  3.    <ul id="menu">  
  4.    <li>  
  5.    <a>  
  6.    <i class="icon_about"></i>  
  7.    <span class="title">Home</span>  
  8.    <span class="description">CSharpcorner is a best tutorials site</span>  
  9.    </a>  
  10.    </li>  
  11.    <li>  
  12.    <a>  
  13.    <i class="icon_work"></i>  
  14.    <span class="title">Fourms</span>  
  15.    <span class="description">You ask any real technical problem</span>  
  16.    </a>  
  17.    </li>  
  18.    <li>  
  19.    <a>  
  20.    <i class="icon_help"></i>  
  21.    <span class="title">Training</span>  
  22.    <span class="description">Provide a every technical training</span>  
  23.    </a>  
  24.    </li>  
  25.    <li>  
  26.    <a>  
  27.    <i class="icon_search"></i>  
  28.    <span class="title">Jobs</span>  
  29.    <span class="description">We also provide a job in development</span>  
  30.    </a>  
  31.    </li>  
  32.    </ul>  
  33. </div> 
Step 7: Now in this step we define a JQuery that moves a bottom slider
 
Code
  1. $(function () {  
  2.  $('#menu > li').hover(  
  3.     function () {  
  4.     var ctx = $(this);  
  5.     $('A', ctx).stop(true, true).animate({  
  6.    'bottom': '-15px'  
  7.    }, 400);  
  8.    $('I', ctx).stop(true, true).animate({  
  9.    'top': '-10px'  
  10.    }, 500);  
  11.    },  
  12.   function () {  
  13.   var ctx = $(this);  
  14.   $('A', $this).stop(true, true).animate({  
  15.  'bottom': '-95px'  
  16.    }, 400);  
  17.   $('I', ctx).stop(true, true).animate({  
  18.  'top': '50px'  
  19.    }, 500);  
  20.  }  
  21.  ); 
Step 8 : The complete code of a fresh bottom slide-out menu application is as follows:
 
Code   
  1. <html>  
  2.  <head>  
  3.  <title>Tom application</title>  
  4.  <link rel="stylesheet" href="Button.css" type="text/css" media="screen"/>  
  5.  <script type="text/javascript">  
  6.  </head>  
  7.  <body bgcolor="#99ccff">  
  8. <h1>Csharpcorner</h1>  
  9.  <div class="container" style="background-color: #FF99CC">  
  10.    <ul id="menu">  
  11.    <li>  
  12.    <a>  
  13.    <i class="icon_about"></i>  
  14.    <span class="title">Home</span>  
  15.    <span class="description">CSharpcorner is a best tutorials site</span>  
  16.    </a>  
  17.    </li>  
  18.    <li>  
  19.    <a>  
  20.    <i class="icon_work"></i>  
  21.    <span class="title">Fourms</span>  
  22.    <span class="description">You ask any real technical problem</span>  
  23.    </a>  
  24.    </li>  
  25.    <li>  
  26.    <a>  
  27.    <classclass="icon_help"></i>  
  28.    <span class="title">Training</span>  
  29.    <span class="description">Provide a every technical training</span>  
  30.    </a>  
  31.    </li>  
  32.    <li>  
  33.    <a>  
  34.    <i class="icon_search"></i>  
  35.    <span class="title">Jobs</span>  
  36.    <span class="description">We also provide a job in development</span>  
  37.    </a>  
  38.    </li>  
  39.    </ul>  
  40.    </div>  
  41.    <script type="text/javascript" src="Scripts/P1.js"></script>  
  42.    <script type="text/javascript">  
  43.   $(function () {  
  44.   $('#menu > li').hover(  
  45.      function () {  
  46.      var $this = $(this);  
  47.      $('a', $this).stop(true, true).animate({  
  48.     'bottom': '-15px'  
  49.     }, 400);  
  50.     $('i', $this).stop(true, true).animate({  
  51.     'top': '-10px'  
  52.     }, 500);  
  53.     },  
  54.     function () {  
  55.     var $this = $(this);  
  56.     $('a', $this).stop(true, true).animate({  
  57.     'bottom': '-95px'  
  58.     }, 400);  
  59.     $('i', $this).stop(true, true).animate({  
  60.    'top': '50px'  
  61.     }, 500);  
  62.   }  
  63.  );  
  64.  </script>  
  65. </body>  
  66. </html> 
Step 9  :  Press Ctrl + F5 to run the application in a browser.
 
Output
 
1.gif
 
2.gif
 
3.gif
 
4.gif
5.gif
Resources
 
Here are some useful resources


Similar Articles