・はじめに

「リンクメニューとか、動的に展開/縮小させたいなぁ」と思い、作ったハンバーガーメニューです。
こんなことができるようになります。

・アイコンクリックでメニューを表示
・メニュー表示はアニメーションで徐々に表示される
・メニューをクリックするとリンク先のページに遷移
・メニューを閉じるときは再度アイコンをクリックする

・基本構成

アプリに挿入するパーツは以下の通り。

その他、アプリ内で利用するコレクションや変数については こちら を参照ください。

・実装方法

ハンバーガーメニューの形を作る

まずは、ハンバーガーメニューを表示した時の形を作成しましょう。
１． リボンメニュー > アイコン > ハンバーガーメニュー アイコンをスクリーン上に配置します。
２． リボンメニュー > 入力 > タイマー をスクリーン上に配置します。
３． リボンメニュー > ギャラリー > 縦 を選択します。※データソースは後で選択
４． 追加したギャラリーの配置をハンバーガーメニューの左側もしくは右側に合わせます。

配置イメージはこんな感じです。
各パーツの名前は下図の通り修正します。

メニュー用のコレクションを作成する

メニュー内容を用意するため、コレクションを作成します。
５． ツリービューに表示されている「App」をクリックします。

６． Appの詳細設定で OnStart に下記を設定します。

ClearCollect(MenuCollection,
  {No:1,url:"https://www.google.com/",Name:"Google"},
  {No:2,url:"https://www.yahoo.co.jp/",Name:"Yahoo"},
  {No:3,url:"https://www.bing.com/",Name:"Bing"},
  {No:4,url:"",Name:""},
  {No:5,url:"",Name:""},
  {No:6,url:"",Name:""},
  {No:7,url:"",Name:""},
  {No:8,url:"",Name:""},
  {No:9,url:"",Name:""},
);
Set(MenuView,0);

ギャラリーにデータソースを追加する

作成したコレクション（MenuCollection）をギャラリーに登録します。

７． ギャラリーをクリックして「MenuCollection」を選択する。

８． ギャラリーのレイアウトを「イメージとタイトル」に変更します。
９． 不要な矢印は削除します。

ギャラリーにアニメーションを追加する

アイコンクリック時にメニューを表示するためにタイマーを利用します。
時間経過に伴って徐々に表示していきます。

・タイマー修正

10． タイマーの詳細設計で下記項目を修正します。

・ハンバーガーメニュー（メニュー表示用）アイコン修正

11． アイコン(Open_Icon) の詳細設計で下記項目を修正します。

・ギャラリー修正

12． ギャラリーの詳細設計で下記項目を修正します。
※このとき、ギャラリー内のアイテム部分を選択してください。

※ギャラリーの表示速度は Heightに設定している「Timer.Duration*3」部分で制御しています。

メニューを閉じる処理を追加する

ここまでで、アイコン(Open_Icon) クリックでメニューを表示できるようになりました。
最後にメニューを閉じる処理を追加します。

・ハンバーガーメニュー（メニュー閉じる用）アイコン修正

13． 表示用アイコン(Open_Icon) に重ねて、閉じる用アイコン(Close_Icon) を追加します。
14． 閉じる用アイコン(Close_Icon) の詳細設計で下記項目を修正します。

動作確認

動作確認し、ハンバーガーメニューが動いていればOKです。
最後に、Timerを非表示にして完成です。

アプリ内で利用するコレクション、変数

メニューとして利用するコレクション（MenuCollection）の構成は以下の通り。

使用する変数の名前と用途は以下の通り。