App Drop down menu

If you want to create a dropdown menu on an app page, here’s a code snippet for you.

You’ll need to adjust the select section for your situation — leave the JavaScript alone 😉

<p>
    <select class="menu-dropdown">
        <option value="">Choose a Page</option><!-- Leave this one empty valued -->
        <option value="home">Home</option><!-- Normal app content -->
        <option value="address">Address</option><!-- Normal app content -->
        <option value="page" data-page="test-page">Test Page</option><!-- Custom app page -->
    </select>
</p>

<script>
jQuery(document).ready(function($){

    $(".menu-dropdown").change(function(){

        var value = $(this).val();
        if (!value) return; // "Choose a Page" selected — do nothing

        var data = {};

        if (value == "page") {
            data.tab = "app-content";
            data.pageName = $(this).find(":selected").data("page");
        } else {
            data.tab = value;
        }

        self.eventHandle(data);
    });

});
</script>

For normal app pages, use just a value in each option. For your own app content pages, set the value to page and add a data-page attribute.

You can find the values you need in the desktop version of Church Admin, under App > App menu. That page shows you the button code for each app menu item.

Normal app content

Address, for example, has this button code:

<button class="tab-button" data-tab="#address">Your text</button>

Take the value from data-tab, drop the #, and use it as your option value:

<option value="address">Address</option>

Custom app content

For a page you’ve created yourself, set the option value to page and add a data-page attribute holding the page’s slug.

In my example there’s a custom app page called Test Page. Its button code looks like this:

<button id="myButton" class="button" data-page="test-page">Your text</button>

So your option would be:

<option value="page" data-page="test-page">Test Page</option>

Any questions — do get in touch!