Skip to end of metadata
Go to start of metadata

Converting unordered nested list menus to dropdown menus.

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

  1. Download the attached resource folder and unzip to make the files available.
  2. Upload these files into ThemeBuilder Resources for your main skin:
  3. Edit the image url's in '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:
  5. Add this code to the ThemeBuilder JS panel:
    The code will remove the random <p> tags that the Confluence editor sometimes inserts, as this 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 that the arrow indicators are added.

    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'); 
    });


    See Skin Editor - JS for help on this.

  6. Note: if your JS panel already has a start and end for jQuery(function($) {..}); leave these lines out and use only

        //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'); 




  7. Save the changes to ThemeBuilder



    See Edit Skins - Overview 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 class = adpt-dropdown horizontal

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



  3. Example shows the div surrounding the children macro, which is an ideal candidate for the dropdown menu styling.

  4. Save the page and the list should now be a dropdown menu.



Use in a ThemeBuilder Panel

  1. Add the div and its classes in HTML around the list you want to style.
    The example shows a list being imported from another panel. The content of that panel is a HTML nested list with web-item macros creating the menu links.



    <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
  2. Menu as seen on page. This is a recreation of the legacy ThemeBuilder View menu have recreated in this tutorial.

HTML Output

  1. HTML code output based on some Confluence Demonstration space pages. Note the classes on the div and top level li

    <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>



  • No labels