如何使用 TailwindCSS 在 Laravel 中显示菜单（Mega Menu）？

Question

我用 TailwindCSS 创建了一个菜单，如下所示：

如您所见，右侧的菜单是 parent_id = 0 的主要项目。

我想当每个项目悬停时，在左侧显示与主要项目相关的菜单。

这是菜单型号：

    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');
        }
    }

这是 HTML 菜单部分：

<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>

如何在 Laravel 中执行此操作？

Answer 1

Here's 一篇关于创建大型菜单的好文章。这是来自同一篇文章的代码。

如果您只是想要解决方案，这里是代码（在完整视图中打开以查看您想要的大型菜单）：

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>

如何使用 TailwindCSS 在 Laravel 中显示菜单（Mega Menu）？

how to show menus (Mega Menu) in Laravel using TailwindCSS?

html

css

php

megamenu

laravel