ThemeBuilder for Confluence Server and DC

ThemeBuilder Dropdown 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.

      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");
      ...
      }

      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.

  3. 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 dropdown 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');
  4. 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 dropdown 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>