|
|
|
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 | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML | | | 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 | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | | | Enchancing dd/mm/yyyy forms with unobtrusive javascript
Categories : Java Script, HTML, User Interface, Date Time | | | Hilight Form Element onFocus
Categories : Java Script, Form Processing, CSS | | | How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, Java Script | | | 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 | | | Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | PHP Calendar
Categories : PHP, Calendar, Date Time, Java Script, CSS | |
|
|
