phphtmlcsslaravelmegamenu
how to show menus (Mega Menu) in Laravel using TailwindCSS?
I create a menu with TailwindCSS like this :
As you can see menu in right side is main items with parent_id = 0.
I want to when each item hovered, show me menus who related to main items in left side.
This is menu Model :
class Menu extends Model
{
use HasFactory;
use SoftDeletes;
protected $fillable = [
'name', 'sort', 'image', 'parent', 'rel', 'slug', 'image_alt', 'image_title'
];
public function child()
{
return $this->hasMany(Menu::class, 'parent', 'id');
}
}
And this is HTML menu section :
<div class="laptopL:max-w-screen-laptopL mx-auto">
<div class="bg-white absolute mt-3 ml-10 shadow-md rounded-b-md z-40 dropdown-content">
<div class="grid grid-cols-12">
<div class="col-span-3 border-l border-gray-400">
<div class="pt-3 px-6">
<p class="text-sm font-medium">Hoverble text to show menu</p>
</div>
<ul class="my-2 space-y-1">
<li class="px-4 hover:bg-gray-100 hover:bg-opacity-70 border-r-4
border-blue-700 border-opacity-0 hover:border-opacity-100">
<a href="#" class="flex items-center justify-between py-3">
<div class="flex items-center">
<div class="mr-1">
<p class="text-xs">MENU ITEMS WITH PARENT ID 0</p>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="col-span-9 bg-gray-100">
<div class="grid grid-cols-6 gap-10 mt-9 mr-10">
<div>
<div class="mb-4">
<p class="text-sm">MENU WITH BOLD STYLE</p>
<div class="mt-3 space-y-4">
<a href="#" class="text-xs text-gray-600 block">SUB MENU</a>
<a href="#" class="text-xs text-gray-600 block">SUB MENU</a>
</div>
</div>
</div>
<div class="col-span-2">
<div class="flex items-center space-x-4">
<div class="ml-4">
<img src="{{ asset('images/1.jpg') }}" alt="" class="h-36">
</div>
<div>
<img src="{{ asset('images/1.jpg') }}" alt="" class="h-36">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I do this in Laravel ?
Solution
Here's a great article for creating mega menu. Here's code from same article.
if You just want the solution here's the code (open in full view to see the mega menu as you want) :
body{font-family:'Noto Sans',sans-serif;background:#fafafa;padding:0;margin:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}nav ul,nav li{list-style:none;padding:0;margin:0}nav a{display:block;text-decoration:none}nav a:hover,nav a:visited{text-decoration:none}.menu-bar{background:#ffffff;display:flex}.menu-link{padding:20px 25px;background:#ffffff;color:#177E89;transition:background .2s,color .2s;position:relative;z-index:1}.menu-link[aria-haspopup="true"]{padding-right:40px}.menu-link[aria-haspopup="true"]:after{content:"";background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowRight.svg#accent');background-size:14px;width:14px;height:14px;font-size:12px;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.mega-menu-header{font-size:1.2em;text-transform:uppercase;font-weight:bold;color:#136a73}.mega-menu{background:#ffffff;z-index:10}.mega-menu--multiLevel{flex-direction:column}@media all and (min-width:951px){.nav{margin-top:50px;background:#ffffff}.nav>nav{max-width:900px;margin:0 auto}.menu [aria-haspopup="true"] ~ ul{display:none}.menu-bar{position:relative}.menu-bar>li>[aria-haspopup="true"]:after{background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#accent')}.menu-bar>li>[aria-haspopup="true"]:hover:after{background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light')}.menu-bar>li>[aria-haspopup="true"]:focus ~ ul{display:flex;transform-origin:top;animation:dropdown .2s ease-out}.menu-bar>li>[aria-haspopup="true"] ~ ul:hover{display:flex}.menu-bar>li:focus-within>[aria-haspopup="true"] ~ ul{display:flex}.menu-bar>li>[aria-haspopup="true"]:focus,.menu-bar>li:focus-within>[aria-haspopup="true"],.menu-bar>li:hover>a{background:#177E89;color:#ffffff}.menu-bar>li>[aria-haspopup="true"]:focus:after,.menu-bar>li:focus-within>[aria-haspopup="true"]:after,.menu-bar>li:hover>a:after{background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowTop.svg#light')}.mega-menu{position:absolute;top:100%;left:0;width:100%}.mega-menu:hover{display:flex}.mega-menu a:hover{background:#dceced;color:#136a73}.mega-menu--multiLevel>li{width:33.33333333%}.mega-menu--multiLevel>li>[aria-haspopup="true"] ~ ul{left:33.33333333%;width:33.33333333%}.mega-menu--multiLevel>li>[aria-haspopup="true"] ~ ul ul{width:100%;left:100%}.mega-menu--multiLevel li:hover>[aria-haspopup="true"] ~ ul{display:block;transform-origin:left;animation:flyout .2s ease-out}.mega-menu--multiLevel li:focus-within>[aria-haspopup="true"] ~ ul{display:block}.mega-menu--multiLevel li:hover>[aria-haspopup="true"],.mega-menu--multiLevel li:focus-within>[aria-haspopup="true"],.mega-menu--multiLevel li:hover>a,.mega-menu--multiLevel li:focus-within>a{background:#dceced;color:#136a73}.mega-menu--multiLevel [aria-haspopup="true"] ~ ul,.mega-menu--multiLevel [aria-haspopup="true"]{border-left:1px solid #f0f0f0}.mega-menu--multiLevel [aria-haspopup="true"] ~ ul:hover,.mega-menu--multiLevel [aria-haspopup="true"]:hover{display:block}.mega-menu--multiLevel [aria-haspopup="true"] ~ ul{position:absolute;top:0;height:100%}.mega-menu--flat>*{flex:1}.mobile-menu-trigger,.mobile-menu-header,.mobile-menu-back-item{display:none}}@media all and (max-width:950px){.nav{padding:20px}.mobile-menu-trigger,.mobile-menu-header,.mobile-menu-back-item{display:block}.mobile-menu-trigger{background:#177E89;color:#ffffff;border:0;padding:10px;font-size:1.2em;border-radius:4px}.mobile-menu-header{order:-1;background:grey}.mobile-menu-header a{padding:20px 25px;color:#ffffff;visibility:visible}.menu-bar{flex-direction:column;position:fixed;top:0;left:-100%;height:100vh;width:350px;max-width:350px;max-width:90%;overflow-x:hidden;transition:left .3s;box-shadow:1px 0 2px 0 rgba(0,0,0,.25)}.menu-bar>li>[aria-haspopup="true"] ~ ul{display:flex;flex-direction:column;background:#ffffff;position:absolute;left:100%;top:0;max-height:100vh;width:100%;transition:left .3s}.menu-bar>li>[aria-haspopup="true"] ~ ul>li>[aria-haspopup="true"]{font-size:1.2em}.menu-bar>li>[aria-haspopup="true"] ~ ul>li>[aria-haspopup="true"] ~ ul a{padding-left:40px}.menu-bar>li>[aria-haspopup="true"] ~ ul>li>[aria-haspopup="true"] ~ ul>li>[aria-haspopup="true"] ~ ul a{padding-left:80px}.menu-bar>li>[aria-haspopup="true"] ~ ul [aria-haspopup="true"]{color:#2a2a2a}.menu-bar>li>[aria-haspopup="true"] ~ ul [aria-haspopup="true"]:after{content:"+";background:none;font-size:1em;font-weight:normal;height:20px;line-height:1}.menu-bar>li>[aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul{max-height:0;transform-origin:top;transform:scaleY(0);transition:max-height .1s}.mega-menu-content{padding:20px 25px}.mobile-menu-back-item{order:-1}.mobile-menu-back-item a{background:#d9d9d9;color:#2a2a2a;max-height:calc(1.4em + 40px);margin-top:calc(0px - (1.4em + 40px));pointer-events:none}.mobile-menu-back-item a:before{content:"";width:14px;height:12px;background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowLeft.svg#default');background-size:14px;margin-right:10px;display:inline-block}.mobile-menu-trigger:focus ~ ul{left:0}.menu-bar:hover,.menu-bar:focus-within{left:0}.menu-bar>li>[aria-haspopup="true"]:focus ~ ul{left:0}.menu-bar>li>[aria-haspopup="true"] ~ ul{margin-top:calc(1.4em + 40px)}.menu-bar>li>[aria-haspopup="true"] ~ ul:hover,.menu-bar>li>[aria-haspopup="true"] ~ ul:focus-within{left:0}.menu-bar>li>[aria-haspopup="true"] ~ ul [aria-haspopup="true"]:focus ~ ul{max-height:500px;animation:dropdown .3s forwards}.menu-bar>li>[aria-haspopup="true"] ~ ul li:focus-within>[aria-haspopup="true"] ~ ul{max-height:500px;transform:scaleY(1)}.menu-bar>li:focus-within ~ .mobile-menu-header a{visibility:hidden}}@media all and (max-width:950px) and (hover:none){.mobile-menu-trigger:hover ~ ul{left:0}.menu-bar>li>[aria-haspopup="true"]:hover ~ ul{left:0}.menu-bar>li>[aria-haspopup="true"] ~ ul:hover{left:0}.menu-bar>li>[aria-haspopup="true"] ~ ul [aria-haspopup="true"]:hover ~ ul{max-height:500px;animation:dropdown .3s forwards}.menu-bar>li>[aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul:hover{max-height:500px;transform:scaleY(1)}.menu-bar>li:hover ~ .mobile-menu-header a{visibility:hidden}}@keyframes dropdown{0%{opacity:0;transform:scaleY(0)}50%{opacity:1}100%{transform:scaleY(1)}}@keyframes flyout{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}<div class="nav">
<nav>
<a href="javascript:void(0);" class="mobile-menu-trigger">Open mobile menu</a>
<ul class="menu menu-bar">
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">1. Multilevel mega
menu</a>
<ul class="mega-menu mega-menu--multiLevel">
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.1 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.1.1 Page link</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-list-link"
aria-haspopup="true">1.1.2 Flyout link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.1.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.1.2.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.1.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.2 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.2.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.3 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.3.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.3.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link">1.4 Page link</a>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">2. Flat mega menu (3
cols)</a>
<ul class="mega-menu mega-menu--flat">
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.1 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.1.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.1.2 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.1.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.2 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.2 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.3 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.2 Page link</a>
</li>
</ul>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">3. Flat mega menu (2
cols)</a>
<ul class="mega-menu mega-menu--flat">
<li>
<a href="#" class="menu-link mega-menu-link mega-menu-header">3.1 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.1 Page link<br />
<small>Short decription of link</small>
</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.2 Page link<br />
<small>Short decription of link</small>
</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.2 Page link<br />
<small>Short decription of link</small>
</a>
</li>
</ul>
</li>
<li class="mega-menu-content">
<p class="mega-menu-header">3.2 Page link header</p>
<p>This is just static content. You can add anything here. Images, text, buttons, your grandma's
secrect
recipe.</p>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link menu-bar-link">Static link</a>
</li>
<li class="mobile-menu-header">
<a href="/home" class="">
<span>Home</span>
</a>
</li>
</ul>
</nav>