Menu dropdown

This example shows the use of the dropdown menu, unobtrusively, and entirely from javascript. The data in the two menus is the same, it is simply the way that the menu is initialised that is different.

Example 1: unobtrusive dropdown menu

unobtrusive dropdown menu

demo_menu_dropdown1.htm

<fieldset><legend>unobtrusive dropdown menu</legend>

    <ul id="pax.widget.menu.dropdown.example1">

        <li>Entree

            <ul>

                <li><a href="javascript:alert('Now with so much garlic it will make you cry!');">Garlic bread</a></li>

                <li><a href="javascript:alert('Its the bacon that makes it good!');">Mini Ceasar salad</a></li>

            </ul>

        </li>

        <li>Mains

            <ul>

                <li><a href="javascript:alert('Its extra roasted to hide the mutton-ness');">Roast Lamb</a></li>

                <li><a href="javascript:alert('We only use the cheapest herbs and spices!');">Grill Chicken</a></li>

                <li><a href="javascript:alert('How would you like it? Well done? Please say well done.');">Sirloin steak</a></li>

                <li><a>Specials of the day</a>

                    <ul>

                        <li><a href="javascript:alert('It is 40% flake sir, not sure what the rest is...');">Fish (ask waiter for details)</a></li>

                        <li><a href="javascript:alert('Now guaranteed to be genetically modified!');">Chicken (like the fish ;o)</a></li>

                        <li><a>Not so specials of the day</a>

                            <ul>

                                <li><a href="javascript:alert('Watch out for the crunchiness...');">Yesterdays Tuna melt</a></li>

                                <li><a href="javascript:alert('The brie is a bit runny...');">Yesterdays Tuna brie</a></li>

                                <li><a href="javascript:alert('Gorganzola? I think its from Hungary');">Yesterdays Tuna gorganzola</a></li>

                                <li><a href="javascript:alert('Its so Goorda youd want to eat it all!');">Yesterdays Tuna chunky gorda</a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

            </ul>

        </li>

        <li>Specials of the day

            <ul>

                <li><a href="javascript:alert('Watch out for the crunchiness...');">Tuna melt</a></li>

                <li><a href="javascript:alert('The brie is a bit runny...');">Tuna brie</a></li>

                <li><a href="javascript:alert('Gorganzola? I think its from Hungary');">Tuna gorganzola</a></li>

                <li><a href="javascript:alert('Its so Goorda youd want to eat it all!');">Tuna chunky gorda</a></li>

            </ul>

        </li>

    </ul>

    <button type='button' id='toggleOrientation'>Toggle Orientation</button>

</fieldset>

demo_menu_dropdown1.js

/*  PAX Menu dropdown demo

    The below javascript will render the dropdown menu, and setup a button that toggles the orientation

*/

pax.load.onloaded( function() {

    //  Initialise the menu

    var menu = pax.$("pax.widget.menu.dropdown.example1");

    pax.widget.menu.dropdown.init( menu );

    //  Setup the button that changes menu aspect

    pax.event.bind( pax.$('toggleOrientation'), 'click', function() {

        pax.widget.menu.dropdown.init( menu, { vertical: ! ( pax.util.hasClassName( menu, 'vertical') ) } );

    } );

} );

Example 2: javascript generated dropdown menu

Javascript rendered dropdown menu

demo_menu_dropdown2.htm

<fieldset><legend>Javascript rendered dropdown menu</legend>

    <div id='pax.widget.menu.dropdown.example2'></div>

</fieldset>

demo_menu_dropdown2.js

/*  PAX Menu dropdown demo

    The below javascript will render the dropdown menu, and setup a button that toggles the orientation

*/

pax.load.onloaded( function() {

    //  JSON structure

    var model = {

        'Entre': {

            '0': '<a href="javascript:alert(\'Now with so much garlic it will make you cry!\');">Garlic bread</a>',

            '1': '<a href="javascript:alert(\'Its the bacon that makes it good!\');">Mini Ceasar salad</a>'

        },

        'Mains': {

            '0': '<a href="javascript:alert(\'Its extra roasted to hide the mutton-ness\');">Roast Lamb</a>',

            '1': '<a href="javascript:alert(\'We only use the cheapest herbs and spices!\');">Grill Chicken</a>',

            '2': '<a href="javascript:alert(\'How would you like it? Well done? Please say well done.\');">Sirloin steak</a>',

            'Main specials of the day': {

                '0': '<a href="javascript:alert(\'It is 40% flake sir, not sure what the rest is...\');">Fish (ask waiter for details)</a>',

                '1': '<a href="javascript:alert(\'Now guaranteed to be genetically modified!\');">Chicken (like the fish ;o)</a>',

                'Not so specials': {

                    '0': '<a href="javascript:alert(\'Watch out for the crunchiness...\');">Yesterdays Tuna melt</a>',

                    '1': '<a href="javascript:alert(\'The brie is a bit runny...\');">Yesterdays Tuna brie</a>',

                    '2': '<a href="javascript:alert(\'Gorganzola? I think its from Hungary\');">Yesterdays Tuna gorganzola</a>',

                    '3': '<a href="javascript:alert(\'Its so Goorda youd want to eat it all!\');">Yesterdays Tuna chunky gorda</a>'

                }

            }

        },

        'Specials of the day': {

            '0': '<a href="javascript:alert(\'Watch out for the crunchiness...\');">Tuna melt</a>',

            '1': '<a href="javascript:alert(\'The brie is a bit runny...\');">Tuna brie</a>',

            '2': '<a href="javascript:alert(\'Gorganzola? I think its from Hungary\');">Tuna gorganzola</a>',

            '3': '<a href="javascript:alert(\'Its so Goorda youd want to eat it all!\');">Tuna chunky gorda</a>'

        }

    };

    //  Initialise the menu

    pax.widget.menu.dropdown.init( pax.$("pax.widget.menu.dropdown.example2"), { model: model } );

} );