Cocoon設定から「モバイル設定」を変更すると、モバイル画面でのメニューデザインを変えることができます。実際に「モバイルメニュー」を変更すると、
「ヘッダーモバイルボタン」に変更
「フッターモバイルボタン」に変更
というふうに、メニューバーの位置をカスタマイズできます。しかし、「ヘッダーモバイルボタン」のときは「ホームボタン」「ロゴ」「検索ボタン」しか表示されないので、ユーザーには使い勝手が悪いです。
これを
というふうにして、カテゴリーなどに飛びやすくします。このような3本線～4本線のデザインが「ハンバーガーメニュー」と呼ばれています。
Cocoonで手軽にハンバーガーメニューを作る手順
STEP1.ハンバーガーメニューの内容を考える
ハンバーガーメニューはユーザーがよく使うと思われる機能を集約しておくパターンが多いです。
例えば、「Cocoon | WordPress無料テーマ」の公式サイトのハンバーガーメニューはこんな感じ。各カテゴリーやお問い合わせフォームにアクセスしやすくなっています。
内容はサイドバーと似ることが多いので、手っ取り早く作りたいのであれば、PCに表示されているサイドバーをそのままハンバーガーメニューとして表示するのがおすすめです。
STEP2.ヘッダーモバイルボタンのメニューを作る
ハンバーガーメニューの中身を考えたら、それをヘッダーにどのように表示するかの設計を考えます。
上の写真のような「ロゴ」×「のハンバーガーメニュー」の作りは多くのサイトで見かけるので、この形を目標にしてみましょう。
ダッシュボードの外観＞メニューを選択します。
画面上部にある「新しいメニューを作成しましょう」を押すことで、新しいメニューが作れるようになります。
メニューが作られたら、
メニュー名: わかりやすい名前（今回は「ヘッダーモバイルボタン」）
メニューの位置: 「ヘッダーモバイルボタン」にチェックを入れる
というふうにしてください。
終わったら「メニューを作成」ボタンを押します。
枠組みができたら中身をつめていきます。左側のメニューから「カスタムリンク」を選択。
項目を2種類追加追加していきましょう。
URLを「#logo」に、リンク文字列を「サイトロゴ」にし、「メニューに追加」ボタンで追加します。
同様に、URLを「#sidebar」に、リンク文字列を「メニュー」にして登録します。
追加したあとに画像のようになっていることを確認し、忘れずに「メニューを保存」ボタンを押しましょう。
STEP3.サイトに表示させる
最後に、作ったメニューをモバイル画面で表示させれば完了です。
Cocoon 設定＞モバイル タブを選択。
モバイルメニュー＞ヘッダーモバイルボタンを選択し、忘れずに「変更をまとめて保存」ボタンを押します。
保存すると、右のプレビュー画面に反映されるので、デザインを確認してみましょう。
実際のモバイル画面でも同じように表示されたらハンバーガーメニュー作りは完成です！
モバイル画面で右上の「メニュー」ボタンを押すと、画像のようにサイドバーの内容が表示されるようになりました。
