Animated Menu
by Prabakaran[ Edit ] 2010-11-03 10:44:22
**********************ani.php*********************
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<title>Animated Menu</title>
<link rel='stylesheet' type='text/css' href='style.css' media='screen, projection' />
<script type='text/javascript' src='animate.js'></script></head>
</head>
<body>
<div id='main'>
<h1><center>HoixIndia</center></h1>
<ul id='menu'>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
<div class='box'>
<p>
����HIOX, one of the leading web Services & application development Company in India. Hiox's areas of invasion include application software, India outsourcing project development, product & web content development, web services such as hosting and domain registration, server configuration & management, VPS management, website monitoring, content management and related Internet consultations.</p>
<p>����HIOX India provides quality web hosting and Domain services like Shared Linux hosting, Windows hosting, Jsp hosting VPS hosting, Domain registration at lowest rates and having more than 1000 customers across the World. We are well specialized in managing Linux based web servers and VPS accounts, ventured into third party VPS server management & administration.</P>
<p>����HIOX was started as an application development company in 2002 and later included web based services and solutions in its activities. HIOX is situated in Coimbatore, the second largest city in TamilNadu, India. Hiox is currently involved in project outsourcing, product, web software services & software development, content management, web hosting and domain registration.</p>
<p>����Web contents & software applications developed by us are appreciated by our thousands of overwhelmed customers throughout the World. HIOX has grown as one of the best content development company in India. Our human resource is at par with successful global companies. Web applications developed by us are used in thousands of websites. FreePHPCMS is a genuine content management site for building all kinds of directories.</p>
<p>����HIOX provides website monitoring service to check whether the website or web server is available for end users. The service can send you the information of your website HTTP status when your website hosting is down. Our website monitoring service is often used by businesses to ensure that their customers are able to access their on-line applications.</p>
<p>����HIOX undertakes customer specific products, outsourcing projects, software and necessary script developments according to customers' requirements. Visit our websites listed below in order to know more about HIOX, our services and development. Our existing clients are from US, UK, Canada, Srilanka, Singapore, China, and Malaysia and so on. </p>
</div>
</div>
</body>
</html>
*****************************************************
****************animate.js**************************
<script type='text/javascript'>
function init() {
if(document.getElementById && document.createTextNode) {
var menu = document.getElementById('menu');
var anchors = menu.getElementsByTagName('a');
for(var i=0, length=anchors.length;i<length;i++) {
anchors[i].onmouseover= function() {
var spot = -1;
this.setAttribute('spot', spot);
this.style.backgroundPosition= '15px 0px';
}
anchors[i].onmouseout= function() {
var spot = 15;
this.setAttribute('spot', spot);
}
}
animate();
}
}
function animate() {
var menu = document.getElementById('menu');
var anchors = menu.getElementsByTagName('a');
for(var i=0, length=anchors.length;i<length;i++) {
var spot = anchors[i].getAttribute('spot');
if (spot>0) {
spot = spot - 2;
if(spot<0) spot = 0;
anchors[i].style.backgroundPosition= spot+'px 0px';
anchors[i].setAttribute('spot', spot);
}
}
setTimeout(animate, 4);
}
window.onload=init;
</script>
***************************************
*******************style.js******************************
body{
color: #000;
font-family: verdana, arial;
font-size: 10px;
}
div#main {
margin: 0 auto;
width: 760px;
}
h1 {
background-color: gray;
border: 1px solid red;
line-height: 3em;
padding: 0;
margin: 0;
margin-bottom: 1em;
margin-top: 1em;
font-size: 1.4em;
}
.box {
border: 1px solid yellow;
background: gray;
width: 600px;
float: right;
}
.box h2 {
text-align: left;
padding: 0.5em;
margin: 0;
font-size: 1.2em;
}
ul#menu {
float: left;
width: 150px;
text-align: left;
list-style-type: none;
}
ul#menu,
ul#menu li,
ul#menu li a {
padding: 0;
margin: 0;
}
ul#menu li a {
text-indent: 30px;
line-height: 46px;
display: block;
font-size: 1.6em;
text-decoration: none;
color: Green;
font-weight: bold;
background: url('button.jpg');
width: 100%;
}
ul#menu li a:hover {
color: White;
background-position: 15px 0px;
}
*****************************
