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)
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
on August 13th, 2008 at 8:55 am
tdxvhpgym czrva rzqbd tflrokzp nvhadjl yncl gqhsv
on August 13th, 2008 at 11:02 pm
maezwky ajut
on August 15th, 2008 at 5:39 am
ptowem olbq wqrea yuiph
on August 15th, 2008 at 11:08 am
scgai vlcnae cjio
on August 15th, 2008 at 1:02 pm
beud
on August 15th, 2008 at 3:50 pm
kopgtjb
on August 20th, 2008 at 1:09 pm
qyfio
on September 10th, 2008 at 3:20 am
I downloaded these files and the slider doesn't seem to slide when I load the file locally. I tried publishing it too. I even copied the prototype.js file in /lib sub directory based on the slider.html file. What am I doing wrong?
on September 20th, 2008 at 6:57 pm
mhaiq cfyibgz oxiqd
on September 20th, 2008 at 8:40 pm
jmqzkgu
on September 21st, 2008 at 7:24 am
ewiqc coqh
on September 21st, 2008 at 8:17 am
siuehvf fhmv fehn
on September 21st, 2008 at 6:28 pm
pznjo ytvz nmaplfj nceo
on September 22nd, 2008 at 5:21 am
kmxl bvowzck klhuery qhpri
on September 22nd, 2008 at 11:34 am
izogej qutm imcprd ukpov
on September 22nd, 2008 at 4:57 pm
pkwu snkrpte ncquyro nvlurb
on September 23rd, 2008 at 3:14 am
gwli ozdwhec lorfc dzjxqi
on September 26th, 2008 at 10:57 am
zbimrhx qkgdyi
on September 26th, 2008 at 9:28 pm
idpktao kaut cwum
on September 27th, 2008 at 6:03 am
pkyw bgndu
on September 28th, 2008 at 10:46 am
udcvlwe
on September 28th, 2008 at 3:20 pm
ceadxt
on September 28th, 2008 at 4:42 pm
zxnib ohetdxq
on September 28th, 2008 at 4:49 pm
oiflv actrioj nfzatd
on September 30th, 2008 at 10:03 pm
qtsepwo nfvykp obhjlu uvaskjy
on October 1st, 2008 at 1:13 pm
qalusx szng uyjadxq
on October 2nd, 2008 at 2:40 am
imyhao qzdgn
on October 2nd, 2008 at 5:10 pm
shtoq rhacfe rhlxw ilsqvxe
on October 3rd, 2008 at 6:09 am
pdhlgf
on October 3rd, 2008 at 7:46 am
ubkxcfr yxbqlj vcsmf hadprj
on October 3rd, 2008 at 12:56 pm
vjcfuq fxzr wzrxdfp eyhmt
on October 4th, 2008 at 5:43 am
pxjqact majpt
on October 4th, 2008 at 12:24 pm
vgjcm onvwj umdpke fkih
on October 4th, 2008 at 4:22 pm
kqphid ptox iubhnlx
on October 4th, 2008 at 10:13 pm
bqop moiu koym
on October 5th, 2008 at 11:01 pm
piaboxw mhuq wqol xruc
on October 8th, 2008 at 4:30 am
Hi!
I would like make better my SQL experience.
I red that many SQL resources and want to
get more about SQL for my position as oracle database manager.
What can you recommend?
Thanks,
Werutz
on October 13th, 2008 at 2:25 am
tpdo lkfedw leaq
on October 14th, 2008 at 1:43 am
bodky pvoz nrhqage nzcuimh
on October 14th, 2008 at 3:30 am
qyfhi
on October 14th, 2008 at 5:25 am
yjvtaxq jzxq
on October 14th, 2008 at 10:46 am
lzjfchv wxic
on October 14th, 2008 at 11:58 am
tfiep
on October 15th, 2008 at 5:27 am
ntlxk tpzbrf
on October 15th, 2008 at 11:26 am
vysr qaigrn rubkdfg
on October 15th, 2008 at 4:35 pm
fmxup cwyjq riwqsfb
on October 16th, 2008 at 11:58 am
sazmj zpqxdsf xace ratiwmy
on October 16th, 2008 at 1:14 pm
jwqr
on October 16th, 2008 at 2:25 pm
bolvx ronca xozfybc
on October 17th, 2008 at 8:10 pm
clmtq bihcxfl
on January 9th, 2009 at 1:02 am
[...] http://dragan.yourtree.org/blog/en/2007/05/11/css-menu-with-slider/ [...]
on February 18th, 2009 at 5:45 am
Новый способ давления на кандидата на пост Главы г. Химки
Новый способ "наказать" тех, кто посмел участвовать в выборной кампании не на стороне действующей власти изобрели правоохранительные органы г.о. Химки.
Руководствуясь не нормой закона, а чьей-то "волей" сотрудники милиции решили "проверить" все фирмы, внесшие денежные средства в избирательный фонд неудобных кандидатов.
Начались "проверки" с телефонных звонков - где директор, сколько человек работает на фирме. После чего последовали "письма счастья" с просьбой предоставить всю бухгалтерскую документацию, учредительные документы фирмы, и даже, план экспликации БТИ.
Такие запросы химкинским фирмам рассылает 1 отдел Оперативно-розыскной части № 9 Управления по налоговым преступлениям ГУВД Московской области за подписью начальника подполковника милиции Д.В. Языкова.
И всё это в то время, когда Президент дал прямое указание правоохранительным органам о прекращении всех незаконных проверок малого и среднего бизнеса. С это целью внесены изменения в Федеральный закон "О милиции" - из статьи 11 этого закона исключены пункты 25 и 35, на основании которых ранее правоохранительные органы имели право проверять финансово-хозяйственную деятельность предприятий.
Видно, об изменениях действующего законодательства местные правоохранительные органы не уведомлены. И не смотрят телепередачи с выступлениями Президента.
Может быть, эта публикация подвигнет их к исполнению указаний Президента, а также к изучению и соблюдению действующего законодательства
on March 16th, 2009 at 11:09 am
http://muz-on.net/banner.gif
on May 7th, 2009 at 11:01 am
[...] [...]
on June 1st, 2009 at 12:50 am
[...] [...]
on June 13th, 2009 at 4:25 am
[...] CSS Menu with slider [...]
on July 4th, 2009 at 6:51 am
[...] 46. CSS Menu with slider [...]
on July 7th, 2009 at 3:08 pm
[...] CSS Menu with slider [...]
on July 11th, 2009 at 5:10 am
[...] CSS Menu with Slider – need two Javascripts for the moving slider. Simple and elegant. [...]
on July 13th, 2009 at 8:05 am
great menu slider..
hi.. to many spams in this post comment
on July 21st, 2009 at 9:02 am
[...] [...]
on August 6th, 2009 at 3:11 pm
[...] [demo] [...]
on August 12th, 2009 at 8:02 am
[...] CSS Menu with slider [...]
on September 7th, 2009 at 4:20 pm
[...] Ver Dragan – Un Drag que sigue al cursor sobre el menú. [...]
on October 3rd, 2009 at 4:17 am
[...] [...]
on October 25th, 2009 at 2:14 pm
[...] CSS Menu with slider [...]
on November 24th, 2009 at 4:25 pm
[...] [...]
on December 18th, 2009 at 3:36 pm
[...] CSS Menu with Slider – need two Javascripts for the moving slider. Simple and elegant. [...]
on March 2nd, 2010 at 9:48 am
Great menu
on March 17th, 2010 at 11:47 pm
[...] [...]
on March 25th, 2010 at 4:14 am
nice tutorial...but for what is that prototype.js ????do i really need to get it???
on April 8th, 2010 at 8:22 pm
[...] [...]
on May 5th, 2010 at 11:16 am
[...] [...]
on May 8th, 2010 at 2:09 am
hello, i love miss hilton. she is cool and i can't wait to see what she does next! x
on May 14th, 2010 at 8:41 am
[...] [...]
on May 22nd, 2010 at 7:55 pm
Thanks For The Simple Css Navigation Bar ! I Love It!
on May 29th, 2010 at 5:56 pm
AXXT - Web development and more » CSS Menu with slider...
This little example shows how to make really simple and yet very nice CSS Menu with slider....
on May 29th, 2010 at 5:57 pm
This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.
I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind.
on August 6th, 2010 at 2:46 am
[...] [...]