App Drop down menu

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

You will need to adjust the select section for your situation, leave the javascript alone 😉

<p>
    <select class="menu-dropdown">
        <option>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 = $(".menu-dropdown").find(":selected").val();
            let data={};
            if(value=="page"){
                var page = $(this).find(':selected').data('page')
                data.tab = "app-content";
                data.pageName = page;
            }else{
                
                data.tab=value;
            }
            self.eventHandle(data);
        });

    })

</script>

For the normal app pages – use just value in each option.

For your app content pages, use page as the value and add a data-page.

You can get the values you need from your desktop version of Church Admin > App > App menu

On that page you are shown the button code for each app menu item.

Normal App Content

For example Address has this button code

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

You just use the value in data-tab in the option above.

Custom App Content

You need to set the value of theoption to page and add a data-tab value for the page in

In my example, there is a custom app page called Test Page. The button code looks like this…

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

Your option would then be

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

Any questions – do get in touch!