モバイルナビのスタイルを以下の中からお選びいただけます。

使用できるアイコンは Font Awesome です。

① リスト形式 背景 白

デモサイトで実物をご覧いただけます。

https://wsp-demo01.hp1.work/

① リスト形式 背景 白

② リスト形式 背景 キーカラー

デモサイトで実物をご覧いただけます。

https://wsp-demo02.hp1.work/

背景色はキーカラーになっています。

モバイルナビの背景色が濃色になっているため、モバイル下部ウィジェットに「お問い合わせセクション」を設置してもとても見づらくなってしまいます。使用するためには以下の CSS を追加してください。

.vk-mobile-nav .veu_contact .contact_frame {
    background-color: #fff;
}
② リスト形式 背景 キーカラー

③ リスト形式 背景 黒透過 アイコン大きめ

デモサイトで実物をご覧いただけます。

https://wsp-demo03.hp1.work/

モバイルナビの背景色が濃色になっているため、モバイル下部ウィジェットに「お問い合わせセクション」を設置してもとても見づらくなってしまいます。使用するためには以下の CSS を追加してください。

.vk-mobile-nav .veu_contact .contact_frame {
    background-color: #fff;
}
③ リスト形式 背景 黒透過 アイコン大きめ

④ リスト形式 背景 白 アイコン白抜き・大きめ・カラフル

デモサイトで実物をご覧いただけます。

https://wsp-demo04.hp1.work/

アイコンの背景色は以下のようになっています。

メニュー項目背景色
1番目キーカラー
2番目カスタムカラー 1
3番目カスタムカラー 2
4番目カスタムカラー 3
5番目カスタムカラー 4
6番目カスタムカラー 5
7番目以降キーカラー
④ リスト形式 背景 白 アイコン白抜き・大きめ・カラフル

⑤ タイル形式 カラフル

デモサイトで実物をご覧いただけます。

https://wsp-demo05.hp1.work/

このデザインを選択すると、サブメニューを使うことができません。(サブメニューは非表示になります)

アイコンの背景色は以下のようになっています。

メニュー項目背景色
1番目キーカラー
2番目カスタムカラー 1
3番目カスタムカラー 2
4番目カスタムカラー 3
5番目カスタムカラー 4
6番目カスタムカラー 5
7番目以降キーカラー
⑤ タイル形式 カラフル

⑥ タイル形式 キーカラー

デモサイトで実物をご覧いただけます。

https://wsp-demo06.hp1.work/

このデザインを選択すると、サブメニューを使うことができません。(サブメニューは非表示になります)

メニュー項目の背景色は キーカラー になっています。

モバイルナビの背景色が濃色になっているため、モバイル下部ウィジェットに「お問い合わせセクション」を設置してもとても見づらくなってしまいます。使用するためには以下の CSS を追加してください。

.vk-mobile-nav .veu_contact .contact_frame {
    background-color: #fff;
}
⑥ タイル形式 キーカラー

⑦ タイル形式 白

このデザインを選択すると、サブメニューを使うことができません。(サブメニューは非表示になります)

メニュー項目の背景色は 白 になっています。
アイコン、テキスト、枠は キーカラー になっています。

デモサイトで実物をご覧いただけます。

https://wsp-demo07.hp1.work/

⑦ タイル形式 白

お問い合わせセクションを配置して、以下のようなレイアウトにすることもできます。

デモサイトで実物をご覧いただけます。

https://wp-demo01.uonuma-js.com/

お問い合わせセクションを配置したレイアウト