ThemeBuilder Drop-down Menus

The following guide will help you wrap an existing unordered list inside an HTML div that will style the list elements into a dropdown menu. The div class ' adpt-dropdown' can be used in pages and ThemeBuilder panels.

1. Download the attached resource folder and unzip it to make the files available.
2. Upload the following files into  ThemeBuilder Resources  for your chosen skin:
   • dropdown.css
   • nav-arrow-down.png
   • nav-arrow-right.png
   • nav-arrow-top.png
     See the  Skin Editor - Resources page for help on this.

3. Edit the image URLs in the dropdown.css file to change the name of the skin from MYROOT to the name of your skin.

   /* -- Supporting class `dir` -- */
   .adpt-dropdown *.dir {
   background-image: url("MYROOT::nav-arrow-down.png");
   ...
   }
   /* -- Components override -- */
   .adpt-dropdown.horizontal li ul *.dir {
   background-image: url("MYROOT::nav-arrow-right.png");
   ...
   }
   

4. Add this code to the ThemeBuilder CSS Import panel, replacing MYROOT with the name of your skin:

   @import url("MYROOT::dropdown.css");

   See the  Skin Editor - CSS  page for help on this.

5. Add this code to the ThemeBuilder JS panel:

   jQuery(document).ready(function($) {
   //remove empty p tags
   $('p').filter( function() {
   return $.trim($(this).html()) == '';
   }).remove()
       // add class for arrows to dropdown li with a ul inside
       $('.adpt-dropdown ul').parent('li').addClass('dir');
   });

   The code will remove the random <p> tags the Confluence editor sometimes inserts, as these can interfere with the display of styled lists. It will also add a class to any drop-down styled list with a nested list inside, so the arrow indicators are added.

   See the  Skin Editor - JS  page for help on this.

   If your JS panel already has a start and end for JQuery(function($) {..}); leave these lines out and use only the following:

   //remove empty p tags
   $('p').filter( function() {
   return $.trim($(this).html()) == '';
   }).remove()
   // add class for arrows to dropdown li with a ul inside
   $('.adpt-dropdown ul').parent('li').addClass('dir');

6. Save the changes to the ThemeBuilder  Edit Skins section.
   See the  Skin Editor - Overview page for help on this.

Use in a Page

1. Edit a page with a nested list you want to style into a dropdown, and add a div with the following class: ' adpt-dropdown horizontal.'

2. Cut the list and Paste it into the new div.

3. Save the page, and the list should now be a drop-down menu.

Use in a ThemeBuilder Panel

Add the div and its classes in HTML around the list you want to style.

<div class="adpt-dropdown horizontal">
<ac:macro ac:name="panel-import">
<ac:parameter ac:name="panel">menu-view</ac:parameter>
</ac:macro>
</div>
...rest of panel content

HTML Output

This HTML code output is based on some Confluence Demonstration space pages. Note the classes on the div and top-level li item:

<div class="adpt-dropdown horizontal">
    <ul class="childpages-macro">
        <li style="height: 60px;"><a href="/pages/viewpage.action?pageId=98308">What is Confluence? (step 1 of 9)</a></li>
        <li class="dir" style="height: 60px;">
            <a href="/pages/viewpage.action?pageId=98313">A quick look at the editor (step 2 of 9)</a>
            <ul class="childpages-macro">
                <li class="dir">
                    <a href="/pages/viewpage.action?pageId=98306">Let's edit this page (step 3 of 9)</a>
                    <ul class="childpages-macro">
                        <li><a href="/pages/viewpage.action?pageId=98310">Get serious with a table (step 5 of
                        9)</a></li>
                        <li><a href="/pages/viewpage.action?pageId=98311">Prettify the page with an image (step 4 of 9)</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="dir" style="height: 60px;">
            <a href="/pages/viewpage.action?pageId=98312">Lay out your page (step 6 of 9)</a>
            <ul class="childpages-macro">
                <li class="dir">
                    <a href="/pages/viewpage.action?pageId=98314">Learn the wonders of autoconvert (step 7 of 9)</a>
                    <ul class="childpages-macro">
                        <li class="dir">
                            <a href="/pages/viewpage.action?pageId=98305">Tell people what you think in a comment (step 8 of 9)</a>
                            <ul class="childpages-macro">
                                <li><a href="/pages/viewpage.action?pageId=98309">Share your page with a team member (step 9 of 9)</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>