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
Toggle Orientation
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 } ) ;
} ) ;