« Vertical Flyout JavaScript Menu
Sliding JavaScript Menu Highlight 1kb »
25
May

Horizontal JavaScript Accordion 1kb

Posted by Michael in Design, JavaScript

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

The front-end markup for the script is a simple unordered list as in the example below…

<ul id="sm" class="sm">
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>

To build the accordion call the function below onload…

slideMenu.build('sm',200,10,10,1)

The first parameter is the id of the unordered list you would like to bind the accordion to. The second is the width you would like the accordion selection to expand to. The third is the timeout variable to control how quickly the sliding function is called. The fourth is the speed of the accordion with 1 being the fastest. The last is optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded.

This script has been tested working in IE6, IE7, Firefox, Opera, and Safari. Please send any bug reports or questions to michael@leigeber.com. Feel free to use the script for any personal or commercial projects.

Click here to download the original script.

Click here to download the script that collapses onmouseout.

Update 5/26/2008 - Removed a line of unnecessary code and resolved an issue with IE6.
Update 5/26/2008 - Tweaked width parsing code, thanks to realazy for the suggestion.
Update 6/05/2008 - Added download for version that reverts back the the uniform collapsed positions.



2 Diggs Spread This

152 Responses


[...] muy elegante a los Kwicks de MooTools o jQuery, de tan solo 1kb, y sin necesidad de depender de ningún framework. Ideal para cambiar esos menus horizontales tan sosos por estos con algo de [...]

Acordeón horizontal en Javascript de solo 1kb | aNieto2K on 26 May 2008 at 1:42 am

It’s a pleasure to hover on it. Great!

stravinskij on 26 May 2008 at 2:02 am

wow only 1kb, it’s amazing. well done

carlos leopoldo on 26 May 2008 at 2:19 am

Wow, only 1KB? You just blew my mind.

Yonghwee on 26 May 2008 at 2:37 am

This is soooo cool!!
Your blog goes right now into my rss feed.

Kep it up dude! You’re doing such a great work!

Cheers!

C on 26 May 2008 at 2:55 am

Nice Accordion. Thanx for sharing it.

linzprod on 26 May 2008 at 4:56 am

[...] Basite indirgenmiş güzel bir yatay akordiyon menü örneği. Bağlantı [...]

Fatih Hayrioğlu'nun not defteri » 26 Mayıs 2008 web’den seçme haberler » düzenlenmiş, Bağlantı, arasında, farklılıklar, kutuları, hazırlamak, jQuery, yapılmış, güzel, aralığı on 26 May 2008 at 6:36 am

Simply amazing!! Really cool. :) Thanks for sharing it.

techzen on 26 May 2008 at 6:56 am

Excellent work, for a tiny weeny script…. Thanks for sharing.

muhammad on 26 May 2008 at 7:08 am

excellent. I have a galance at your code, and find:

var cw=parseInt(s.style.width.replace(’px’,”));

in fact, use

var cw=parseInt(s.style.width, ‘10′);

should be more clarity, I think :)

realazy on 26 May 2008 at 7:22 am

Have you done a vertical version that works this well and is as small?

Tom on 26 May 2008 at 7:33 am

Thank you all for the positive feedback.

@Realazy - Thanks for the suggestion, the ‘10′ is unnecessary since the integer will always be the first in the width string. I updated the code and updated the post.

Michael on 26 May 2008 at 7:34 am

@Tom - If you look back I had a post in April with a vertical accordion. It functions a little differently but could easily be tweaked to work on rollover. Take a look and let me know if you have any questions michael@leigeber.com.

Michael on 26 May 2008 at 7:36 am

Check out this menu as well
http://www.phatfusion.net/imagemenu/index.htm

Grundic on 26 May 2008 at 7:42 am

@Grundic - Thanks for sharing the link but looking at the script it is 2.5kb and that is just for the extension to the mootools framework (36kb). Definitely something to look into if you are currently using the mootools framework though.

Michael on 26 May 2008 at 7:52 am

Doesn’t properly work in MSIE 6.x. With 1.gif - 4.gif you only see 3 images.
When repating image 4 you’ll see 4 images… in MSIE. And you see 5 images in Opera :-)

Marc on 26 May 2008 at 8:25 am

@Marc - I am unable to replicate either of these issues. Please email me the specific versions of the browsers as well as your os and any other relevant information. Thanks for reporting.

Michael on 26 May 2008 at 8:35 am

<strong>Lightweight JavaScript Accordion Menu (Only 1KB)…</strong>

This is a lightweight (only 1kb), accordion type JavaScript horizontal menu that does not require any JavaScript frameworks.
It is very easy to setup as the script automatically adjusts to the number of elements in the accordion and the dimensions of t…

Free Web Resources - Web Resources Depot on 26 May 2008 at 11:08 am

Michael.I just say tks.

Booto on 26 May 2008 at 12:20 pm

[...] 首先要感谢Michael,因为是他做出来的这个JS导航,并且之用了1kb,可以说是震撼了我.所以如果大家要转载的话.一定要把原始链接给Michael链接上. [...]

Booto’Blog » Blog Archive » 仅仅需要1KB的JS导航 on 26 May 2008 at 12:33 pm

[...] Michael Leigeber qui en est à l'origine, de plus son script est compatible IE6, IE7, Firefox, Opera, et Safari [...]

Menu en accordéon horizontal et glissant en 1kb ! on 26 May 2008 at 1:16 pm

[...] framework gerektirmeyen buradaki akordiyon menu hem kullanım kolaylığı hem de çok küçük boyutlu olması sebebiyle oldukça [...]

1KB’lik akordiyon Menu « basarozcan on 26 May 2008 at 2:12 pm

[...] Horizontal JavaScript Accordion - This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion. Tested working in IE6, IE7, Firefox, Opera, and Safari. [...]

Horizontal JavaScript Accordion on 26 May 2008 at 2:21 pm

Nice, is this a kind of stream-lined version of Mootools Slider?

Jake on 26 May 2008 at 2:59 pm

@Jake - Sure you can think of it as that, I am not trying to compete with the JS frameworks just offer alternatives to individual functionalities. Depending on your circumstances perhaps a full-blown framework is in order but I prefer to keep things independent when it makes sense.

Michael on 26 May 2008 at 3:12 pm

This is nice but it doesn’t degrade very well, I just get two buttons with JS disabled.

Ryan on 26 May 2008 at 3:54 pm

@Ryan - This one is a tough one to degrade perfectly. It might be beneficial to set the initial width of the li elements in the CSS to a % based on the total number of list elements. Of course there is no way to do that dynamically without JavaScript so I did not use that method in my CSS.

Michael on 26 May 2008 at 4:01 pm

Yep, working fine on Konqueror!

Great Job!

Ayoze on 26 May 2008 at 5:56 pm

[...] blog Web Development Blog de Michael Leigeber est une mine d’or… les scripts proposés sont de toutes petites [...]

Free Tools, Le meilleur des outils gratuits pour webmaster» Blog Archive » Menu accordéon horizontal javascript (1ko) on 26 May 2008 at 7:23 pm

Wow…. Awesome!!!! ^_^

i.am.Ben on 26 May 2008 at 10:36 pm

[...] LEIGEBER | Horizontal JavaScript Accordion 1kb Link: Web Resources Depot | Lightweight JavaScript Accordion Menu (Only 1KB) Posts [...]

Menu tipo acordeon horizontal con JavaScript, sin Frameworks | Seraphinux on 27 May 2008 at 12:30 am

[...] script è scaricabile a questo indirizzo, dove trovate anche la documentazione [...]

CSSMagazine » Blog Archive » “Accordion” in Javascript on 27 May 2008 at 2:21 am

[...] Horizontal JavaScript Accordion 1kb: menú estilo acordeón en un solo kilobyte y sin usar ningún framework. [...]

AOWS » Captcha al estilo iPhone on 27 May 2008 at 2:46 am

[...] à horizontal javascript accordion, un javascript de 1kb vous pourrez faire la même chose sans utiliser de [...]

Laserolame : X-OR’s Blog » Code Développement » 1kb Image Menu on 27 May 2008 at 3:36 am

[...] librería, y solo la utilizáramos en alguna entrada puntual). Por ello hay que destacar éste curioso menú realizado con Javascript que ocupa tan solo 1kb. Es simple, cumple su cometido, y puede quedar más o menos vistoso en función de las imágenes que [...]

» Menú en forma de acordeón con Javascript de 1kb | Informática Práctica | on 27 May 2008 at 5:19 am

Very cool script Michael.

Is there any way to replicate http://jeremymartin.name/examples/kwicks.php?example=1 a little more, in that they’re all initially collapsed upon loading and re-collapse after you hover off them?

I’m sure it’d add a bit more to the size of the script, but I’d be interested in seeing if it’s possible without clogging it up too bad.

Travis on 27 May 2008 at 5:45 am

I give you a digg! thanks for your script. I’m going to comment it in my blog after a few tests. Good Bye!

Sirviejo on 27 May 2008 at 6:13 am

[...] in C# - Common StringBuilder Mistake in C# .NET - Sandboxing JavaScript Using <iframe> - MayHorizontal JavaScript Accordion 1kb - 40 Tips for optimizing your php code - Modern JavaScript Development: Reflection in JavaScript - [...]

Katod’un Seyir Defteri - 27.05.2008 at katodivaihe on 27 May 2008 at 6:41 am

Awesome work! I will put a link in my site

Ives on 27 May 2008 at 8:11 am

@Travis - The first part is already done, simple do not pass in the 5th parameter and they will all be collapsed. The other would be simple enough to implement, I will look into it and probably update the post and update. I should still be able to keep it <= 1kb. Thanks for the input.

Michael on 27 May 2008 at 8:18 am

Is there a way to load this somewhere besides in the body tag? My CMS doesn’t allow me to put any scripts in the <body> of the html. I have to put scripts in the <head> or somewhere down in the page.

Chris on 27 May 2008 at 8:50 am

@Chris - Absolutely, you can add the tag anywhere inside <script> tags. You can also use window.onload=function(){} in your JavaScript directly at the bottom. Shoot me an email is you have any questions. michael@leigeber.com

Michael on 27 May 2008 at 8:53 am

[...] clipped from http://www.leigeber.com [...]

RobertoBaca.net » Efecto de acordeón en javascript on 27 May 2008 at 8:27 pm

[...] Quer fazer aqueles menus estilo Accordion sem o uso de qualquer framework JavaScript? E ainda por cima o tamanho do Script é de 1KB. Sim, isso é possível, foi o que fez o Leigeber, dê só uma olhada lá. [...]

Accordion Horizontal em JavaScript com apenas 1kb » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards on 28 May 2008 at 3:01 am

Nice.
But why re-invent something that does already exist (as really more flexible plugins) in the Web 2.0 frameworks such as Prototype, MooTools, jQuery or EXT ?

Mr Web 2.0 on 28 May 2008 at 4:10 am

wow! excellent script.
I’ll try to use this on my new web page

thanks

Gustavo Ribeiro on 28 May 2008 at 6:34 am

Great script. It would be perfect if the accordeon would go back to its post loading position when roll out.

In my website, if i’m in categorie 3 for example and if i’m rolling over the menu and then staying on the page, it looks like i’m not on categorie 3 anymore.

Could you do something for that ?

ravaza on 28 May 2008 at 8:29 am

@Mr Web 2.0 - Possibly number of reasons depending on the situation… For example, imagine you only need this horizontal accordion on your site. Here are your two options…

Mootools - 22kb + Slider Extension - 2kb = 24kb and 2 HTTP requests
This Script - 1kb = 1kb and 1 HTTP Request

Why reinvent anything? To make it better.

Michael on 28 May 2008 at 8:36 am

@ravaza - It has been requested a few times so I will have that functionality added in today or tomorrow.

Michael on 28 May 2008 at 8:38 am

[...] here to view the working sample. Codes and Scripts, Javascripts, [...]

Horizontal Javascript Accordion Menu! - Opensource, Free and Useful Online Resources for Designers and Developers on 28 May 2008 at 10:24 am

Wow, this is awesome. I would love to see a vertical version. Most accordion menu’s vertically move to much. Having something fixed like the overall width on the horizontal version is great. Why not on the vertical version? I’ll take a look at your April postings for the vertical version.

daveyp on 28 May 2008 at 6:51 pm

@daveyp - Excellent suggestion, it is now on the official to-do list.

Michael on 28 May 2008 at 8:56 pm

[...] 滑动菜单效果是非常酷的，但很多时候，我们不希望为了酷使用大量脚本，影响到网页的载入速度．现在，如果你想弄一个滑动菜单，那你不用担心这个问题了，Leigeber创建了一个1KB的横向滑动菜单脚本． [...]

1KB的横向滑动菜单脚本 | 帕兰映像 on 29 May 2008 at 1:37 am

How can I have two accordions on the same page? I tried doing the following but it does not work:

<body onload=”slideMenu.build(’sm’,200,10,10,1); slideMenu.build(’sm2′,200,10,10,1)”>

<ul id=”sm” class=”sm”>
<li><img src=”images/1.gif” alt=”" /></li>
<li><img src=”images/2.gif” alt=”" /></li>
<li><img src=”images/3.gif” alt=”" /></li>
<li><img src=”images/4.gif” alt=”" /></li>
</ul>
Testing second horizontal
<ul id=”sm2″ class=”sm”>
<li><img src=”images/1.gif” alt=”" /></li>
<li><img src=”images/2.gif” alt=”" /></li>
<li><img src=”images/3.gif” alt=”" /></li>
<li><img src=”images/4.gif” alt=”" /></li>
</ul>

Ubaidullah Nubar on 29 May 2008 at 4:00 am

@Ubaidullah Nubar - You would need to modify the script to use prototype properties to run multiple instances. Shoot me an email if you need help. michael@leigeber.com

Michael on 29 May 2008 at 8:37 am

Excellent work!

Janko on 29 May 2008 at 3:23 pm

[...] Descarguenlo desde aquí [...]

Menu acordeon hecho en Javascript y de 1kb | Data2max.com on 29 May 2008 at 7:09 pm

I like this dynamic menu, great

calmhuang on 29 May 2008 at 11:25 pm

[...] semana en muchos blog, se anunciaba un javascript con el que se podía crear un “Acordeón Horizontal” y ademas de solo [...]

Modificando el SlideMenu Horizontal | Cmacias.com on 30 May 2008 at 12:17 pm

Nice scripts there…And yes! It’s possible to do cool things in js without using a full featured 100Ko Framework :D keep it up!

Laurent on 30 May 2008 at 8:15 pm

[...] etc. y pueden tener problemas para usarlos en sus sitios web. Por eso me parece muy destacable Horizontal JavaScript Accordion, que puedes descargarte directamente en formato [...]

Menú acordeón para los que no entienden de programación on 31 May 2008 at 4:53 am

[...] Horizontal JavaScript Accordion 1kb [...]

This Month’s Best: May 2008 - Six Revisions on 31 May 2008 at 12:17 pm

Do you still expect to add the function I request or did you change your mind ? (sorry to ask again)

ravaza on 31 May 2008 at 5:58 pm

@ravaza - Sorry, I have been very busy the last few days. If I have time then I will get it updated tomorrow. Have already done some of the coding. I’ll shoot you an email when it is ready.

Michael on 31 May 2008 at 6:02 pm

[...] Horizontal JavaScript Accordion 1kb [...]

Weekly linkage madness - elisa.nobe.blog on 01 Jun 2008 at 1:02 am

[...] Acordión horizontal. [...]

JavaScript sin frameworks / acualicio.us on 01 Jun 2008 at 1:39 am

Ok, I am having a brain spasm or something… cause I can’t get any links to show up under the individual sections…

Is there a functioning example I can check out?

Rob on 01 Jun 2008 at 12:43 pm

@Rob - Not 100% sure what to envision by links under the individual sections. Shoot me an email at michael@leigeber.com and we will get it worked out.

Michael on 01 Jun 2008 at 12:53 pm

[...] 11- Horizontal JavaScript Accordion 1kb [...]

Websites you shouldn’t have missed in May 2008 on 01 Jun 2008 at 2:51 pm

Really nice looking and so smooth :-) Good Job!

Peter on 01 Jun 2008 at 5:33 pm

Sorry for my poor english and thank you for your good job !
I would like to know if I can make a link for each slide of the accordion ?
Thank you

Marie-Claude on 02 Jun 2008 at 1:30 am

[...] Horizontal JavaScript Accordion 1kb - Web Development Blog via kwout [...]

アコーディオン型メニューを作成するJavaScript on 02 Jun 2008 at 2:15 am

[...] 11- Horizontal JavaScript Accordion 1kb [...]

Best Design Articles from May 2008 on 02 Jun 2008 at 4:16 am

Really Useful!! Just 1 Kb

Giuseppe on 02 Jun 2008 at 4:57 am

@Marie-Claude - Absolutely, <li><a href=”#”><img src=”images/1.gif” alt=”" /></a></li>

Michael on 02 Jun 2008 at 8:17 am

[...] Horizontal JavaScript Accordion 1kb - Web Development Blog (tags: javascript menu accordion) [...]

» links for 2008-05-27 | Paul Cowles on 02 Jun 2008 at 6:17 pm

[...] something more sweeter than the simple CSS-only Horizontal Bookshelf I posted last week. Mike wrote a versatile 1kb horizontal accordion script can be used for [...]

Horizontal JavaScrip SlideMenu | ShekLOG on 03 Jun 2008 at 6:53 am

Wow, now that is just impressive.

Rob on 03 Jun 2008 at 12:59 pm

teşekürleerr:D:D

yaisn on 04 Jun 2008 at 2:50 pm

Hi
Is there a way to get the animation to reset if the cursor is moved away?
Thanks

Adam on 04 Jun 2008 at 3:27 pm

@Adam - Quite a few have requested that functionality. I have been busy but will have some time tonight so check back in the morning for an update.

Michael on 04 Jun 2008 at 3:29 pm

[...] dem Blog findet ihr auch eine Demo des Scripts. ord = (typeof(ord)!=’undefined’) ? ord : Math.random()*10000000000000000; [...]

JavaScript Accordion - 1kb - im Designpicks Blog on 05 Jun 2008 at 6:52 am

I have been playing around with this for a bit now and the latest feature is great though from a styling point of view i do not seem to be able to add any padding between the images, I know from the images you have used above you add a border manually but when I add this border either via a border-right:5px solid #fff; or padding: 0 5px; the menu breaks in that the final image (I’m using 6) drops a line, this happens regardless of the width I use.

Any ideas?

Adam on 05 Jun 2008 at 4:22 pm

@Adam, shoot me an email with the link and I will take a look.

Michael on 05 Jun 2008 at 4:25 pm

[...] Visit Download [...]

NETTUTS - Web development tutorials and links - Best of the Web - May on 06 Jun 2008 at 5:10 am

Awesome tutorial.. Will definitely work this in somewhere ;)

Prof Kienstra on 06 Jun 2008 at 5:59 am

[...] Nuevo menú con el tan de moda efecto acordeón que nos llega desde Leigeber. Está realizado en javascript desde cero y sin el uso de ninguna librería estilo jQuery pensando solamente 1kb. Los podemos usar como menú, presentar algo o lo que se nos ocurra. La implementación es sumamente fácil, solamente tendremos que crear una lista desordenada a la que darle una id que usaremos como indicador para el script. El resto de pasos son los de siempre, cargar entre head /head el script y llamar a una pequeña función. Está testeado en IE6, IE7, FireFox, Opera y Safari. Otra forma para crear menús vistosos de forma muy fácil, con un peso mínimo y varias opciones de personalización. [...]

diarioTHC | Menú horizontal efecto acordeón on 06 Jun 2008 at 11:57 am

[...] Horizontal JavaScript Accordion - acordioane orizontale ştim, dar iată unul vertical interesant. La anumite design-uri poate fi ideal. [...]

Leigeber: Web Development Blog | CNET.ro on 06 Jun 2008 at 12:32 pm

Cool, small and useful. Thank you.

taylan on 07 Jun 2008 at 2:47 pm

[...] Sadece 1Kb lık güzel bir JS akordiyon menü. Bağlantı… [...]

Surf Raporu 07 Haziran 2008 | Taylan Aktepe on 07 Jun 2008 at 3:10 pm

[...] Visit Download [...]

CSS Dev Kit » » Best of the Web - May on 09 Jun 2008 at 9:45 am

@Marie-Claude - Absolutely, <li><a href=”#”><img src=”images/1.gif” alt=”” /></a></li>
Michael on 02 Jun 2008 at 8:17 am
I’ve tried to put some links on my images with href but on IE6 there is a bug, the image with the link was not hidden ….

Lorenzo on 10 Jun 2008 at 11:03 am

i want the samething but vertical .. for a side menu
i would love to have that … so clean and nicely done.

Cheers

Sultan on 10 Jun 2008 at 1:53 pm

Any ideas about this bug on IE6, when you create a link <li><a href=”#”><img src=”images/1.gif” alt=”” /></a></li> , the image with the link was not hidden….

Lorenzo on 10 Jun 2008 at 3:04 pm

@Sultan - It is on the to-do list.

@Lorenzo - I am not seeing that problem in my test http://sandbox.leigeber.com/slidemenu4/slidemenu.html Shoot me an email with a link. michael@leigeber.com

Michael on 10 Jun 2008 at 3:19 pm

[...] Now, if you want a sliding menu, you needn’t care that any more. Because Leigeber created the light sliding menu script just [...]

Sliding Menu Script | Web Tool OnLine on 10 Jun 2008 at 11:31 pm

Wow, this is so cool and its also fast loading. THanks

fedmich on 11 Jun 2008 at 6:06 am

Any possibility to reverse the thinking on this?

Rather than defining the width of the rolled out menu, define the universal width of the collapsed menus? This would allow the according to stretch to the width of the UL or parent or predefined percentage?

John on 11 Jun 2008 at 11:52 am

@John - If I follow you correctly that would easily be possible although personally I think the logic currently in place has a broader appeal. Shoot me an email if you are looking to work it out and I will be happy to help.

Michael on 11 Jun 2008 at 12:41 pm

[...] Leigeber a publicado un menú acordeón en posición horizontal animado que solo pesa 1kb, sin duda una bonita alternativa a otros [...]

Menú acordeón en javascript on 12 Jun 2008 at 12:06 pm

You are very talented. I have a great deal of respect for you for allowing us to share with you. From all the posts I have read, you are very helpful with people who need it. That is another reason for me taking the time t write. Not many tuts give support beyond initial post. I look forward to playing around with this! Thank you very much…

Jonathan on 12 Jun 2008 at 2:45 pm

http://www.alexeivella.com — This guy used Moo to create his layout. Is there any way to do this without Moo? It’s incredibly intimidating to new designers.

Z on 15 Jun 2008 at 7:14 pm

@Z - If you are referring to the accordion, I posted a script a few weeks back. Check the archive.

Michael on 15 Jun 2008 at 7:20 pm

nice, too bad doesn’t de-grade very well :(

michael on 15 Jun 2008 at 8:21 pm

@michael - How would you have it degrade? Obviously you can set the initial width in % of the sections in your particular instance which would aid some. Thanks.

Michael on 16 Jun 2008 at 10:34 am

hi michael, is it possible to implement a “snap-back” function? e.g. I use a horizontal accordion in a new project (http://www.martin-franssen.de/de/klienten) as a main menue. It would be nice if the accordion tabs would snap back to the actual menue entry after hover another tab…

bolleone on 18 Jun 2008 at 8:49 am

Oh wow that’s really nifty looking.

Jenny on 18 Jun 2008 at 1:17 pm

@bolleone - That could definitely be done with a little modification. Shoot me an email if you need help.

Michael on 19 Jun 2008 at 8:08 am

[...] Download do Script Aqui - Mais informações e demos Menu Horizontal Acordion [...]

Menu Acordion em Somente 1kb | RuanWeb on 19 Jun 2008 at 8:18 pm

[...] Horizontal JavaScript Accordion - This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement. [...]

Accordion Scripts | WebTecker the latest Web Trends, Resources and News. on 19 Jun 2008 at 8:45 pm

[...] Via | Leigeber [...]

Menu orizzontale con effetto fisarmonica via JavaScript! - Geekissimo on 28 Jun 2008 at 6:01 am

Pretty cool script, exactly what i was looking for.
Tho i have a question: Is it posible to change the width of the remained image? i want to see more of the selected image and less of the other ones…

mp on 29 Jun 2008 at 9:29 am

ignore what i just asked… -_-
wasnt paying atention

mp on 29 Jun 2008 at 9:31 am

[...] Nuevo menú con el tan de moda efecto acordeón que nos llega desde Leigeber. Está realizado en javascript desde cero y sin el uso de ninguna librería estilo jQuery pensando solamente 1kb. Los podemos usar como menú, presentar algo o lo que se nos ocurra. La implementación es sumamente fácil, solamente tendremos que crear una lista desordenada a la que darle una id que usaremos como indicador para el script. El resto de pasos son los de siempre, cargar entre head /head el script y llamar a una pequeña función. Está testeado en IE6, IE7, FireFox, Opera y Safari. [...]

Con mis movidas… y mis lios » Menú horizontal efecto acordeón on 30 Jun 2008 at 10:56 am

[...] Horizontal JavaScript Accordion - This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement. [...]

Great Accordion Scripts | Ajaxonomy on 01 Jul 2008 at 3:45 am

Well scripted and very useful. Thanks for posting and keeping the knowledge flowing smoothly.

Affordable Web Design on 01 Jul 2008 at 9:50 pm

cool. :)
but is eventhandlers don’t create memory leaks in IE ?

Alex on 02 Jul 2008 at 7:23 am

@Alex - I have not run into it while testing nor heard from anyone else. I will hit it again in IE6 when I get a chance to make sure there are no problems. Did you see a problem? Shoot me an email if so.

Michael on 02 Jul 2008 at 7:59 am

That script is a masterpiece, really.
But there’s a little bug when you have nested lists that you want to behave and display differently.
So here’s a little fix :

replace :
sa=m.getElementsByTagName(’li’);

with :
for(i=0; i<m.childNodes.length; i++) {
if(m.childNodes[i].nodeType == 1 && m.childNodes[i].nodeName.toLowerCase() == “li”) {
sa.push(m.childNodes[i]);
}
}

Cheers ;-)

Rémy on 11 Jul 2008 at 3:03 am

[...] 11- Horizontal JavaScript Accordion 1kb [...]

DON’T MEASURE: The Best Design Articles from May 2008 | Dalton Trent's Blog on 14 Jul 2008 at 7:13 pm

Where is the demo???

Sandie Sørensen on 15 Jul 2008 at 2:36 am

@Sandie - The demos are embedded in the post using iframes.

Michael on 15 Jul 2008 at 6:31 pm

[...] 【その２】 JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」 [...]

B豚の備忘録 - マウスオーバー、クリックでメニューが展開するアコーディオンUI色々 on 16 Jul 2008 at 9:12 pm

[...]   Similar : Image menu de la http://www.phatfusion.net  si Horizontal Java Script Accordion-1kb de la http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/  [...]

www.marwebdesign.net » Blog Archive » “Concertina menu” on 22 Jul 2008 at 1:39 pm

[...] Horizontal JavaScript Accordion 1kb - Web Development Blog This versatile 1kb horizontal JavaScript accordion script (tags: javascript webdesign css) This entry was written by delicious and posted on July 23, 2008 at 3:34 pm and filed under links. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. [...]

i.ndustrio.us » links for 2008-07-23 on 23 Jul 2008 at 5:34 pm

Is it possible to change the width of the remained image i want to do so

Cool Interesting Facts on 27 Jul 2008 at 6:50 am

Is there any way to add a dropdown menu to the panels?

Darrin on 28 Jul 2008 at 11:25 am

Excellent.
But i have one type to you:

parseInt(s.style.width,’10′);

change to:
parseInt(s.style.width);

Because the second argument of parseInt indicate the base for the conversion.
Default is 10.

Nagib on 28 Jul 2008 at 2:26 pm

I really appreciate the simplicity of this script, the only request/suggestion I would make is the ability to add borders/padding/margins to the actual LI elements, currently if I add border or padding to the LI elements, the last image dissapears (well it actually shifts down but it is invisible due to the dimensions of the .sm object.)

Hector on 29 Jul 2008 at 3:13 pm

@Cool Interesting Facts - The second variable will control the remaining width.

@Darrin - Sure, if you are handy with JavaScript it could be done… having a hard time envisioning that though.

@Nagib - Thanks for pointing that out, not sure why I would have added that in. I will update the script asap.

@Hector - It can be done, just make sure you adjust the width as you make other adjustments. It can all be handled through the CSS.

Michael on 03 Aug 2008 at 8:27 am

Hey Michael, Great script. Much lighter than the ‘Image menu’ that I am using currently.
So I can migrate over to this script I would greatly appreciate a little help on the ability for the menu to reopen to the 5th parameter menu item on mouseout. I’ve tried to have a look myself but Javascript is not my thing. Any help would be greatly appreciated… And I can see that many people before me have asked for the same functionality. :-)
Cheers
Pete

Pete on 04 Aug 2008 at 5:16 am

hi,

I’d like to use this script several times in a same pahe but it dosent work, can someone help me ? thanks

shinchan on 04 Aug 2008 at 7:05 am

Good Work

wed on 05 Aug 2008 at 1:05 am

i am using ur Horizontal JavaScript Accordion 1kb….i want to make it in loop.in the script,the lst parameter is 1..it will display the first image….whats the problem is , i want the UL should display first image as default…could u pls help me regardings this…very urgent…..

raghu on 05 Aug 2008 at 2:58 am

hi,

I’d like to use this script several times in a same page but it doesn’t work, can someone help me ?

thanks !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

(’im trying to include 2 horizontal accordeons from this script in this vertical accordeon : http://www.learningjquery.com/2007/02/more-showing-more-hiding)

shinchan on 05 Aug 2008 at 5:57 am

I hope I’m not making an idiot of myself but I’ll ask anyway: I’m trying to make a website using your Accordion as the main navigation. Everytime it loads, it shows the first picture. How can I make it show the picture that I’ve clicked on after loading the new site? If that’s to complicated, how can I make it that all pictures are equaly hidden? Thanks very much, you did a great job on that script!

Manuel on 06 Aug 2008 at 4:56 am

Hi Michael, is there a work round that you know of so a transparent background of a png would work when used within the <li> parameter, i can see you are stacking the elements but its setting the backgrounds of each <li> with a white fill?

Stuart on 06 Aug 2008 at 5:35 am

Ok, I did make an idiot of myself :-P. You explained nicely at the top but I somehow didn’t see. Thanks anyway and it’s a really awesome script!

Manuel on 06 Aug 2008 at 6:12 am

Great little menu. Very flexible, I can mix things up and use divs, graphics, links, php calls to create images on the fly etc. all inside the list example. I dissected the mootools version and it just gave me a migraine. This is just what the doctor ordered.

Bill

Bill on 06 Aug 2008 at 2:01 pm

Got the problem resolved re the returning to the menu on mouse out to the selected (5th parameter)

var slideMenu=function(){
var sp,st,t,m,sa,l,w,gw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName(’li’);
m.onmouseout=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
l=sa.length; w=m.offsetWidth; gw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=gw+’px’; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){
s.onmouseover=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}
s.onmouseout=function(){clearInterval(m.timer);clearInterval(m.htimer);m.htimer=setInterval(function(){slideMenu.slide(s,true)},t)}
},
slide:function(s,c){
var cw=parseInt(s.style.width);
if((cw<st && !c) || (cw>gw && c)){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
if(ow<gw && c){oi=Math.floor((gw-ow)/sp); oi=(oi>0)?oi:1; o.style.width=(ow+oi)+’px’;
}else if(ow>ot && !c){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+’px’}
if(c){owt=owt+(ow+oi)}else{owt=owt+(ow-oi)}}}
s.style.width=(w-owt)+’px’;
}else{clearInterval(m.timer);clearInterval(m.htimer)}
}
};
}();

Pete on 08 Aug 2008 at 9:04 am

Oh that is not easy to read. Add the following to the 8th line of code.
m.onmouseout=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}

Pete

Pete on 08 Aug 2008 at 9:05 am

Nice script! IE8 gives performance problems… Do you have any idea why?

Leon on 12 Aug 2008 at 3:16 pm

@Pete - On the todo (very long list). Will get to it when I can.

@shinchan - It isn’t currently setup to allow multiple instances, also on my todo list.

@raghu - Unless I am misunderstanding you the information you need is in my original post.

@Stuart - I don’t remember setting the background to white… shoot me an email.

@Pete - Thanks for sharing. I will take a look when I can and update the script if suitable.

@Leon - I am not currently supporting IE8. I will take a look if the performance issue remains in beta 2.

Michael on 12 Aug 2008 at 8:15 pm

My images don’t appear. Is there a problem with my image files?

felix on 13 Aug 2008 at 2:58 pm

You have done commendable work. I shall be adding it in http://www.downloadjavascripts.com in coming updates. Cheers!!!

Tanve on 14 Aug 2008 at 5:07 am

Michael, a wonderful script and using it on several pages and using iframes instead of imgs - works great!!! Thanks for sharing! I’m trying to insert a setTimeout() in the script to provide a short delay in the onmouseover before a panel expands, but can figure it out. I’m also playing with onmouseup to force the user to click instead of just roll over. Ideally, it would be nice to do both: control the delay time and allow users to click. Any help would be appreciated.

John on 15 Aug 2008 at 2:45 pm

hola amigos esta muy bonito lo del acordeon pero lo que necesito es cambiar…ejemplo aumentar mas menus x k yo tengo 5 menus… como agrego mas.. y que al posesionarme en cada uno me lleve a un pop-up
gracias
dolanor_24@hotmail.com

orlando on 18 Aug 2008 at 7:57 pm

lol….good one. When I first looked at it I was like what so special about this. Looks like normal button. But when I hovered my mouse over it, it suddenly changed my view. Very simple and neat approach.

Minnie
_________________________________
http://www.writingservicescompany.com

Term Papers Writer on 20 Aug 2008 at 2:33 am

[...] Download do Script Aqui - Mais informações e demos Menu Horizontal Acordion [...]

Mateus Souza » Arquivos do Blog » Alguns Scripts em Java on 22 Aug 2008 at 8:07 am

Hello Michael, awesome script!

I ran into the following problem: I have the accordion div nested in another div which has its style set to display:none. The thing is that I need to set display to none as I have a scriptaculous function that makes the element fade in after the page is loaded. Strangely the display:none affects the accordion in FF 3 and IE 6 (they don’t display the accordion), but not in Safari 3 nor Opera 9. What can I do? Do you have a solution to this?

Roman on 01 Sep 2008 at 8:10 am

EDIT: see this example: <a href=”http://mosik.info/sandbox/example.html”>http://mosik.info/sandbox/example.html</a>

Roman on 01 Sep 2008 at 5:22 pm

I have developed a “fix” for your wonderful accordion, because it currently “messes up” other LI formatting when another list is embedded on an “accordion panel”. I have altered the line “sa=m.getElementsById(’li’);” to read “sa=document.getElementsByName(’HALI’);”… and in the accordion list markup, have added “name=’HALI’” to each LI tag. If you’d like an example, shoot me an email. Oh, I also think it might be nice to offer a version which works with “onclick” instead of “onmouseover”. (a trivial change, but some people will appreciate you providing two versions)

A. Boulley on 05 Sep 2008 at 10:45 am
Trackback URI | Comments RSS

Leave a Reply

Subscribe to RSS Feed
Powered by FeedBurner
Recent Links
  • Web Resource Depot Features daily web resources and scripts for web developers.
  • Ajax Rain Resource for open source Ajax and Javascript scripts.
  • stock.xchng Large community-driven free stock photography resource.
  • ReadWriteWeb Popular blog on web technology trends and social media.
  • UI Patterns User interface design patterns by example.
  • DZone Social bookmarking for web developers.
  • Intro to CSS Sprites Simple introduction too performance boosting CSS sprites.
  • Matt Berseth ASP.NET and Silverlight related blog.
  • CSS Drive Categorized CSS gallery and examples.
  • NETTUTS Web development tutorials and links.
more links | suggest a link
Tag Cloud