Step 1 : First open a HTML editor such as Notepad.
- Open start->Notepad.
- The name of editor is "Button".
Step 2 : Create a Folder on a desktop.
- Right-click on desktop->new->Folder.
- Name of folder is "Tom".
Step 3 : Open Visual Studio.
- Go to file -> New->Projects.
- Crete an ASP. NET Web Application.
- Name of "FreshBottom.aspx".
Step 4 : Add a 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".
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
body
{
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:Purple;
background:#99ff99 url(../title.png) no-repeat center center;
height:600px;
}
a.ref
{
color:Fuchsia;
text-decoration:none;
text-shadow:1px 1px 1px #000;
position:absolute;
bottom:10px;
right:10px;
}
a.ref:hover
{
color:Green;
}
ul#menu li
{
float:left;
margin:0px 10px 0px 0px;
}
ul#menu a
{
cursor:pointer;
position:relative;
float:left;
bottom:-95px;
line-height:20px;
width:210px;
}
Step 6 : Now we define the content of a fresh bottom slide-out menu .
Code
<h1>Csharpcorner</h1>
<div class="container" style="background-color: #FF99CC">
<ul id="menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">Home</span>
<span class="description">CSharpcorner is a best tutorials site</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Fourms</span>
<span class="description">You ask any real technical problem</span>
</a>
</li>
<li>
<a>
<i class="icon_help"></i>
<span class="title">Training</span>
<span class="description">Provide a every technical training</span>
</a>
</li>
<li>
<a>
<i class="icon_search"></i>
<span class="title">Jobs</span>
<span class="description">We also provide a job in development</span>
</a>
</li>
</ul>
</div>
Step 7 : Now in this step we define a JQuery that moves a bottom slider:
Code
$(function () {
$('#menu > li').hover(
function () {
var ctx = $(this);
$('A', ctx).stop(true, true).animate({
'bottom': '-15px'
}, 400);
$('I', ctx).stop(true, true).animate({
'top': '-10px'
}, 500);
},
function () {
var ctx = $(this);
$('A', $this).stop(true, true).animate({
'bottom': '-95px'
}, 400);
$('I', ctx).stop(true, true).animate({
'top': '50px'
}, 500);
}
);
Step 8 : The complete code of a fresh bottom slide-out menu application is as follows:
Code
<html>
<head>
<title>Tom application</title>
<link rel="stylesheet" href="Button.css" type="text/css" media="screen"/>
<script type="text/javascript">
</head>
<body bgcolor="#99ccff">
<h1>Csharpcorner</h1>
<div class="container" style="background-color: #FF99CC">
<ul id="menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">Home</span>
<span class="description">CSharpcorner is a best tutorials site</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Fourms</span>
<span class="description">You ask any real technical problem</span>
</a>
</li>
<li>
<a>
<class="icon_help"></i>
<span class="title">Training</span>
<span class="description">Provide a every technical training</span>
</a>
</li>
<li>
<a>
<i class="icon_search"></i>
<span class="title">Jobs</span>
<span class="description">We also provide a job in development</span>
</a>
</li>
</ul>
</div>
<script type="text/javascript" src="Scripts/P1.js"></script>
<script type="text/javascript">
$(function () {
$('#menu > li').hover(
function () {
var $this = $(this);
$('a', $this).stop(true, true).animate({
'bottom': '-15px'
}, 400);
$('i', $this).stop(true, true).animate({
'top': '-10px'
}, 500);
},
function () {
var $this = $(this);
$('a', $this).stop(true, true).animate({
'bottom': '-95px'
}, 400);
$('i', $this).stop(true, true).animate({
'top': '50px'
}, 500);
}
);
</script>
</body>
</html>
Step 9 : Press Ctrl + F5 to run the application in a browser.
Output
Resources
Here is some useful resources