初心者向け。XDでハンバーガーメニューの作り方を詳しく解説
275 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
XDでハンバーガーメニューを作りたいと思ったのですがネットの記事で簡単に作ることができる情報を見つけることができなかったので解説の記事を作りました。
デモは↓です。
それでは解説します。
ハンバーガーメニューを開く所まで
デモと同じハンバーガーメニューを作るのは簡単です。
まずアートボートを2つ用意してハンバーガーメニューを開く前のアートボードとハンバーガーメニューの中身のアートボードを用意します。
↓の左のアートボードがハンバーガーメニューを開く前で右のアートボードがハンバーガーメニューの中身です。
XDを開いてプロトタイプにします。
ハンバーガーメニューを開く前のアートボードのハンバーガーメニューをクリックすると青色の丸の中に白の矢印が出ます。
矢印を持ってハンバーガーメニューの中身のアートボードにくっつけて下さい。
この時にXDの画面の右側の表示が↓と同じになっているかの確認をしてください。
同じじゃなかったら同じにしてください。
ちなみに項目の中身を変えるとハンバーガーメニューの動きや開くまでのスピードを変えたりできます。
これでハンバーガーメニューを開く所までは完成です。
ハンバーガーメニューの閉じ方
閉じ方も簡単です。
プロトタイプでハンバーガーメニューのxをクリックします。
青色の丸をハンバーガーメニュー開く前のアートボードにくっつけます。
↓は青い線が見切れていますがハンバーガーメニューを開く前のアートボードの下の方についています。
これでハンバーガーメニューの完成です。
ちゃんとできているかの確認のためにプレビューからハンバーガーメニューをクリックしてください。
プレビューはXDを開いた時の右上の赤枠です。
