Creating a jQuery Accordion-like navigation menu

This article demonstrates how easy it is to create your own custom jQuery Accordion-like navigation menu. Have a look at the final result in case you’re not sure what this is all about. In the end, it’s nothing more than a two-level navigation list with the same behaviour of jQuery’s UI Accordion.

Now, I’m not going to give a detailed explanation of the code I used (although the title of this blog is called apexplained). I’ll just describe the steps required and provide all the code necessary to build your own accordion navigation menu. You need a basic understanding of HTML, CSS and jQuery.

Step 1: create a custom list template

Navigate to the template section of your current theme and create a list template from scratch. Assign it a name and a custom theme class. Then, edit the list template and copy and paste the following code snippets in the appropriate sections.

• Before List Entry > List Template Before Rows (for example <table> <tr>)

<div id="accordion-nav">

• Template Definition > List Template Current

<div class="is-lvl1-current"><span>#TEXT#</span>
</div>

• Template Definition > List Template Current with Sub List Items

<div class="is-lvl1-current"><span>#TEXT#</span>
<ul>

• Template Definition > List Template Noncurrent

<div><span>#TEXT#</span>
</div>

• Template Definition > List Template Noncurrent with Sub List Items

<div><span>#TEXT#</span>
<ul style="display:none;">

• Sublist Entry > Sub List Template Current

<li>
  <a href="#LINK#" alt="#TEXT#" class="is-lvl2-current">
    <img src="#IMAGE#" #IMAGE_ATTR# />
    #TEXT#
  </a>
</li>

• Sublist Entry > Sub List Template Noncurrent

<li>
  <a href="#LINK#" alt="#TEXT#">
    <img src="#IMAGE#" #IMAGE_ATTR# />
    #TEXT#
  </a>
</li>

• After Sublist Entry > Sublist Template After Rows

</ul></div>

• After List Entry > List Template After Rows (for example </tr> </table>)

</div>

<script type="text/javascript">
  $("div#accordion-nav div span").click(function() {
    $(this).parent().siblings().children("ul").slideUp(300);
    $(this).siblings("ul").slideToggle(300);
  });
</script>

Step 2: create and populate your navigation list

We now need to create a static list based on the list template we created in step 1. Include all navigation entries for your application in a parent-child hierarchy. The image below shows you the list entries that I used for the demo:

static list entries

Please note that the list template we created in step 1 only supports a two-level hierarchy. List entries with a level number higher than two are simply being rendered as two-level entries. Also, pay attention to the Current List Entry section for each list entry. You might experience abnormal behaviour when you don’t take into account this setting.

Step 3: add the list to your pages

Page zero is ideal in this situation since you probably want to display the navigation menu on multiple pages. So just create a list region that uses the list we created in step 2.

Step 4: apply CSS to the list region

Here is how I styled mine in the demo:

/* first level */
div#accordion-nav {
  width: 200px;
  background-color: #DDDDDD;
  border: 1px solid #9C9C9C;
}
div#accordion-nav div span {
  display: block;
  padding: 4px 5px 4px 10px;
  font-weight: bold;
  color: #222222;
}
div#accordion-nav div span:hover {
  background-color: #CCCCCC;
  cursor: pointer;
}

/* second level */
div#accordion-nav div ul {
  list-style-type: none;
  margin: 0;
}
div#accordion-nav div ul li {
  background-color: #F2F2F2;
  padding: 4px 5px 4px 18px;
}
div#accordion-nav div ul li a {
  text-decoration: none;
  color: #222222;
}
div#accordion-nav div ul li a.is-lvl2-current {
  font-weight: bold;
}
div#accordion-nav div ul li a:hover {
  color: #3E9FFF;
}
div#accordion-nav div ul li a img {
  vertical-align: middle;
  padding-right: 5px;
}

That should do it. Give me a shout if you experience any issues.

The most important part here is the list template in step 1. It allows full control over the HTML that is being generated by APEX. The little piece of jQuery code in the template is responsible for the accordion effect.

To be honest, I only scraped the surface of what could be written on this topic. There are endless possibilities when building your own list template since you are in charge of how it’s build (HTML), how it behaves (JavaScript/jQuery), and how it should look like (CSS).

Update on 14-08-2012: modified the list template definition so that it’s possible to work with childless first-level entries.