|
|
|
title : Javascript animated menu items
story : This is JS script for applying animation behaviour
on the menu items of a webpage. It applied the behaviour
on all <a href... elements of which belong in an element
with id='menu'. View the demo to see the example applied.
If the client does not have javascript he will only see
css :hover properties getting applied and not the
smooth animation. Nothing is injected into the HTML
file though.
Live demo @ http://temp.cherouvim.com/forums/animate/
files: /animate.js
/index.html
/style.css
/arrow.png
author : Ioannis Cherouvim
web : http://cherouvim.com
date : 2005-12-03
animate.js
| 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; | |
demo HTML
| <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>Animated Menu</h1>
<ul id='menu'>
<li><a href='#'>about</a></li>
<li><a href='#'>foo</a></li>
<li><a href='#'>bar</a></li>
<li><a href='#'>example</a></li>
<li><a href='#'>contact</a></li>
<li><a href='#'>links</a></li>
</ul>
<div class='box'>
<h2>title</h2>
<p>foo bar text example.com</p>
</div>
</div>
</body>
</html> | |
|
|
| Unobtrusive javascript for applying expand/shrink behaviour
Categories : DHTML, CSS, Java Script, HTML | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML | | | Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | | | KuPro1.0 - This application is for Libraries, To see their books and to maintain users books. This version is in Turkish, future vers may have English Support.
Categories : PHP, Java Script, DHTML | | | AutoComplete in HTML forms
Categories : DHTML, HTML, Web Browsers | | | An example of how to place elements on the footer of a page with CSS/HTML so that the elements are always on the bottom, regardless of the client resolution.
Categories : HTML, CSS, Interfaces | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | Menu in sliding bar or tree style. Handles frames by using small amount of javascript. Handles external and internal pages. Allows custom code to replace a menu item.
Categories : PHP Classes, PHP, Java Script, DHTML | |
|
|
|
