• Home
  • Portfolio
  • Wordpress en Design
  • Internet
  • Ontwikkelingen internet
  • Online winkelen

Extra webmaster tips

  • Active blog
  • Beste bloggers
  • Seo marktplaats
  • Website forum
  • Gratis banners
  • Website artikelen
  • Bedrijfstelefoongids
  • Mr domein
  • Promoot je site
  • Meer tips
welkom bij i-marco
Kerstpakket op maat voor het personeel Online boeken bestellen Tips gebruik van zoekmachines

Simple JQuery Accordion menu - Redux

This is a simple menu done in JQuery. It's an evolved version of the menu first presented in this i-marco weblog entry. I made these changes after receiving all sorts of change requests and other feedback on the original version. This new version is rather flexible and caters to various needs people may have when building a website. It also allows multiple instances of the menu on the same webpage, unlike the original.

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.

1: Standard accordion menu

By default, the menu will launch in collapsed state and function like an accordion.

  • Weblog Tools
    • PivotX
    • WordPress
    • Textpattern
    • Typo
  • Programming Languages
    • PHP
    • Ruby
    • Python
    • PERL
    • Java
    • C#
  • Marco's blog (no submenu)
  • Cool Stuff
    • Apple
    • Nikon
    • XBOX360
    • Nintendo
  • Search Engines
    • Yahoo!
    • Google
    • Ask.com
    • Live Search

2: Accordion with first submenu expanded at page load

Same as the first example but with the first submenu expanded when the page loads. This is achieved by adding a CSS class expandfirst to the unordered list.

  • Weblog Tools
    • PivotX
    • WordPress
    • Textpattern
    • Typo
  • Programming Languages
    • PHP
    • Ruby
    • Python
    • PERL
    • Java
    • C#
  • Marco's blog (no submenu)
  • Cool Stuff
    • Apple
    • Nikon
    • XBOX360
    • Nintendo
  • Search Engines
    • Yahoo!
    • Google
    • Ask.com
    • Live Search

3: Non-accordion (standard expandable menu)

This is a standard expandable menu without accordion functionality. This is achieved by adding a CSS class named noaccordion to the unordered list.

  • Weblog Tools
    • PivotX
    • WordPress
    • Textpattern
    • Typo
  • Programming Languages
    • PHP
    • Ruby
    • Python
    • PERL
    • Java
    • C#
  • Marco's blog (no submenu)
  • Cool Stuff
    • Apple
    • Nikon
    • XBOX360
    • Nintendo
  • Search Engines
    • Yahoo!
    • Google
    • Ask.com
    • Live Search

4: Collapsible accordion with first item expanded at page load

This menu works like an accordion when one menu item is already expanded but will collapse completely when the expanded item is clicked. Additionally it has the first item expanded at page load. This is achieved by adding a CSS class named collapsible and another CSS class named expandfirst like in example 2.

  • Weblog Tools
    • PivotX
    • WordPress
    • Textpattern
    • Typo
  • Programming Languages
    • PHP
    • Ruby
    • Python
    • PERL
    • Java
    • C#
  • Marco's blog (no submenu)
  • Cool Stuff
    • Apple
    • Nikon
    • XBOX360
    • Nintendo
  • Search Engines
    • Yahoo!
    • Google
    • Ask.com
    • Live Search

Source

  1. function initMenus() {
  2. $('ul.menu ul').hide();
  3. $.each($('ul.menu'), function(){
  4. $('#' + this.id + '.expandfirst ul:first').show();
  5. });
  6. $('ul.menu li a').click(
  7. function() {
  8. var checkElement = $(this).next();
  9. var parent = this.parentNode.parentNode.id;
  10.  
  11. if($('#' + parent).hasClass('noaccordion')) {
  12. $(this).next().slideToggle('normal');
  13. return false;
  14. }
  15. if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  16. if($('#' + parent).hasClass('collapsible')) {
  17. $('#' + parent + ' ul:visible').slideUp('normal');
  18. }
  19. return false;
  20. }
  21. if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  22. $('#' + parent + ' ul:visible').slideUp('normal');
  23. checkElement.slideDown('normal');
  24. return false;
  25. }
  26. }
  27. );
  28. }
  29. $(document).ready(function() {initMenus();});

Download

Download everything in a zip file

Meer over Wordpress en Design >
Copyright © 2023 Alle rechten voorbehouden I-Marco.nl | Sitemap