69 lines
3.2 KiB
Markdown
69 lines
3.2 KiB
Markdown
### megamenu
|
|
A megamenu is a large, horizontal menu where each item opens a popover to show a large block of navigation links. Megamenu must be used once, on top of the page. Inside each popover, you can use a daisyUI menu, or any custom content. Megamenu fits better on large screens only, and for small screens, you can hide the megamenu and show the content in a dropdown or a drawer.
|
|
|
|
[megamenu docs](https://daisyui.com/components/megamenu/)
|
|
|
|
#### Class names
|
|
- component: `megamenu`
|
|
- part: `megamenu-active`
|
|
- modifier: `megamenu-wide`, `megamenu-full`
|
|
- direction: `megamenu-vertical`
|
|
- size: `megamenu-xs`, `megamenu-sm`, `megamenu-md`, `megamenu-lg`, `megamenu-xl`
|
|
|
|
#### Syntax
|
|
```html
|
|
<button class="btn sm:hidden" popovertarget="my-megamenu-1">Menu</button>
|
|
<div class="megamenu max-sm:megamenu-vertical {MODIFIER} p-2 border border-base-300" id="my-megamenu-1" popover>
|
|
<span class="megamenu-active"></span>
|
|
|
|
<button popovertarget="item-1">button 1</button>
|
|
<div id="item-1" popover>
|
|
{CONTENT}
|
|
</div>
|
|
|
|
<button popovertarget="item-2">button 2</button>
|
|
<div id="item-2" popover>
|
|
{CONTENT}
|
|
</div>
|
|
|
|
</div>
|
|
```
|
|
Example of megamenu-wide with lots of menu items
|
|
```html
|
|
<button class="btn sm:hidden" popovertarget="my-megamenu-2">Menu</button>
|
|
<div class="megamenu max-sm:megamenu-vertical megamenu-wide w-full p-2 border border-base-300" id="my-megamenu-2" popover>
|
|
<span class="megamenu-active"></span>
|
|
<button popovertarget="c1">One</button>
|
|
<div id="c1" popover>
|
|
<div class="flex max-sm:flex-col items-start">
|
|
<ul class="menu w-full md:menu-horizontal">
|
|
<li>
|
|
<a>first column menu item</a>
|
|
<ul><li><a>sub menu item</a></li></ul>
|
|
</li>
|
|
<li>
|
|
<a>second column menu item</a>
|
|
<ul><li><a>sub menu item</a></li></ul>
|
|
</li>
|
|
<li>
|
|
<a>third column menu item</a>
|
|
<ul><li><a>sub menu item</a></li></ul>
|
|
</li>
|
|
</ul>
|
|
<img src="{image-url}" class="md:max-w-sm max-md:w-auto" alt="sample image at the end of the megamenu">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
|
|
#### Rules
|
|
- {MODIFIER} is optional and can have one of the modifier class names and one of the size class names
|
|
- `megamenu-active` span is mandatory. it's the indicator that moves under the active item
|
|
- Each button must have a corresponding popover with the same id as the popovertarget value. HTML IDs must be unique.
|
|
- {CONTENT} can include a daisyUI menu (`<ul class="menu"><li><a>List item 1</a></li></ul>`), or any custom content
|
|
- you can put horizontal menu inside the popover like `<ul class="menu menu-horizontal"><li><a>List item 1</a></li></ul>`, or any other variation of daisyUI `menu` component
|
|
- On small screens the whole megamenu is hidden using `max-sm:megamenu-vertical` class and it will be vertical when visible. The button with `popovertarget="my-megamenu-1"` opens the megamenu with `id="my-megamenu-1" popover`
|
|
- On large screens, we hide the button using `sm:hidden` and the megamenu will be a horizontal menu, and each button inside the megamenu will open its corresponding popover.
|
|
- megamenu can have max 10 popovers inside it
|
|
- to hide the arrow from the buttons, use `after:content-none` class on the buttons
|