> For the complete documentation index, see [llms.txt](https://docs.oceanesia.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oceanesia.com/tutorial-1/setting-template/giga-shop/membuat-flyout-menu/flyout-menu-tipe-1.md).

# Flyout  Menu Tipe 1

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LeA0EjDrnGo5JgqX6PN%2F-LeA0mEEirN5eBoEDAee%2FScreenshot_68.png?alt=media\&token=392f28f6-708a-4817-a269-54fc3c25d4f9)

Untuk membuat Flyout Menu seperti gambar di atas, ikuti petunjuk dibawah ini:

1. Login di website admin > Masuk ke menu **Journal > Dashboard > Flyout Menu >** klik **“Edit”** pada **Flyout Menu, Home Page/Lside(1)**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LeA0EjDrnGo5JgqX6PN%2F-LeA1ITn0smH9Jessdbi%2FScreenshot_69.png?alt=media\&token=64b4b600-731a-41e5-8163-4d29195d7851)

2\. Klik pada **Menu item 1**. 

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LeA0EjDrnGo5JgqX6PN%2F-LeA28Gz0QZPsdTR8gy3%2Fimage.png?alt=media\&token=19f51064-6ab0-46aa-b56f-9fa586a0c88c)

a. **Menu Name**: Masukan nama menu Anda. 

b. **Menu Type**: Pilih **Mega Menu** 

c. **Link**: Anda dapat mengarahkannya ke Category atau membiarkannya saja kosong. 

*\*\*Note*: **Container Background**: Untuk membuat background image, caranya dengan klik **Edit,** maka akan muncul tampilan seperti ini.

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LeA0EjDrnGo5JgqX6PN%2F-LeA2gIlDnt6zjmSXTM9%2Fimage.png?alt=media\&token=43468a13-18cc-4347-8da1-da498e9b5c7e)

Update Gambar Background Anda pada kolom image > Jika sudah, Klik **Ok.**

3\. Untuk selanjutnya ikuti pengisian dibawah ini:

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LeA0EjDrnGo5JgqX6PN%2F-LeA3PZhEfe0Lgls57ug%2Fimage.png?alt=media\&token=0f3d7e9b-f938-4cb0-9e93-19b9f7a44e8c)

a. **Column Type**: Pilih **Category** 

b. **Categories**: tambahkan induk kategori sebanyak yang ingin Anda tambahkan. 

c. **Links Type**: Pilih **Subcateg** 

d. **Show:** Pilih **Links**

e. **Column Width**: Pilih 66% 

4\. Setelah selesai klik **Save**.