CSS Menu with slider
CSS Menu with slider using Prototype.js
This little example shows how to make really simple and yet very nice CSS Menu with slider.
Example
Part 1 - HTML
<div id="menu"> <div id="m-top"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">F.A.Q.</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="m-slider"> <div id="slider"></div> </div> </div>
Part 2 - Javascript
Now we add Javascript event that listen for mousemove on div that holds menu.
window.onload=function(){
var offsetLeft=$('menu').offsetLeft;
Event.observe('menu', 'mousemove', function(event){
coordinateX=Event.pointerX(event)-offsetLeft;
$('slider').style.marginLeft=coordinateX-20+'px';
});
}
Part 3 - CSS
Here you can see the CSS file that is used for this example.
Download
slider.html
slider.css
helper.js
prototype.js (1.5.1)
Viewed 190582 times by 54813 viewers
26 Comments