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 190584 times by 54813 viewers
on May 14th, 2007 at 6:00 pm
Simple yet nice eyecatcher. Now you only need to add a little ball and bricks to complete your mini-breakout-in-a-menu ...
on May 14th, 2007 at 8:23 pm
[...] usuarios, aunque no aporte ninguna funcionalidad extra.Requiere Prototype 1.5.1. [Demo][Descargar] # « Alexa se renuva… porfuera [...]
on May 14th, 2007 at 8:36 pm
Nice!
on May 14th, 2007 at 10:22 pm
Simple but very nice.
Thank you
on May 15th, 2007 at 3:29 am
[...] Menú 1: Css menu with slider [...]
on May 15th, 2007 at 2:21 pm
looks good but I have few suggestions:
it would be nice if on mouse out the slider should disappear.
any option for sub menu items?
on May 18th, 2007 at 3:45 am
AWESOME!!! Thanks for posting this!!
on May 25th, 2007 at 5:08 am
nice one.
you could use a transparent img for the cursor
on June 29th, 2007 at 5:25 am
very nice, thanks for the post.
on August 2nd, 2007 at 6:37 am
[...] CSS Menu with Slider - need two Javascripts for the moving slider. Simple and elegant. [...]
on August 8th, 2007 at 4:20 pm
The function has an error, when resizing the browser the slider goes anywhere!
on August 20th, 2007 at 8:59 pm
No it doesn't. Works fine for me.
on September 13th, 2007 at 11:07 pm
nice good post
on September 30th, 2007 at 6:17 pm
[...] CSS Menu with Slider - need two Javascripts for the moving slider. Simple and elegant. [...]
on October 19th, 2007 at 1:01 pm
[...] Here an interesting effect using CSS and Javascript. I don't think I have seen it used yet. AXXT - Web development and more » CSS Menu with slider Geoserv __________________ FaqPal |NewsDots |Blog |APNAOnline | Utopian Productions |Pliggs |DIY Pad |HRM Suites | Friendology Website of the Month - Submit your site here [...]
on November 20th, 2007 at 8:22 pm
Nice article!
on December 14th, 2007 at 3:25 pm
Cool
on March 13th, 2008 at 2:12 am
i have the same problem....can anyone help??
on August 8th, 2007 at 4:20 pm
The function has an error, when resizing the browser the slider goes anywhere!
on March 13th, 2008 at 2:17 am
ARRRRGH! i found it! heheh cheers anyways!
on April 6th, 2008 at 9:26 pm
[...] CSS Menu with Slider - require two Javascripts for moving slider. Easy and stylish. [...]
on May 31st, 2008 at 6:05 am
http://yahooemail.googlesearchworld.info/index.html yahooemail
on June 23rd, 2008 at 2:39 am
[...] CSS Menu with Slider - need two Javascripts for the moving slider. Simple and elegant. [...]
on June 23rd, 2008 at 12:55 pm
[...] [...]
on June 27th, 2008 at 1:06 pm
Good simple example. Thanks
on July 2nd, 2008 at 11:28 pm
[...] CSS Menu with Slider (Javascript Powered) [...]
on July 3rd, 2008 at 2:51 pm
the example is very good but when resizing the browser the slider goes anywhere!
I use firefox 1680x1050 screen resolution
Can anybody help me please? I would like to use it but this seems to be a big problem
Thanks a lot
kris