Simple JQuery Accordion menu

This is a simple Accordion menu done in JQuery. Links with subitems under them will expand the submenu when clicked. Items that don't have subitems are normal links. (example link to Marco's blog). The menu initialises with the first submenu expanded.

If this code snippet is useful for you feel free to download it and use it on your (non commercial) website.

This snipped is discussed on my blog in this post.

Source

  1. function initMenu() {
  2. $('#menu ul').hide();
  3. $('#menu ul:first').show();
  4. $('#menu li a').click(
  5. function() {
  6. var checkElement = $(this).next();
  7. if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  8. return false;
  9. }
  10. if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  11. $('#menu ul:visible').slideUp('normal');
  12. checkElement.slideDown('normal');
  13. return false;
  14. }
  15. }
  16. );
  17. }
  18. $(document).ready(function() {initMenu();});

Collapsing menu

Just want it as a simple collapsing / uncollapsing menu? Find it here. Even less code.

Download

Download everything in a zip file

下载代码说明
X关闭

jquery+Css黑色风格版(手风琴菜单)

jquery+Css黑色风格版的手风琴菜单，老外编写的，还带有动感效果，当菜单展开的时候，是一种缓冲效果的慢慢展开，这样给人的感觉很舒服，jQuery生成的缓冲效果会比JS的更平滑；手风琴菜单其实就是折叠菜单，有横向或竖向的，根据你网站的网页布局，再加上老外的示例，修改一下就能用在你的网站上。