css 制作一个响应式的巨型菜单

nlejzf6q  于 2023-04-23  发布在  其他
关注(0)|答案(1)|浏览(104)

我正在尝试做一个菜单，我已经适应了响应，在移动的设备上使用汉堡菜单。
以下是原始的HTML、CSS（它使用Tailwind）和JavaScript：

document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menu-toggle');
    const menu = document.querySelector('.menu');

    menuToggle.addEventListener('click', function() {
      menu.classList.toggle('show');
    });
  });
  </body>
.mega-menu {
    display: none;
    left: 0;
    position: absolute;
    text-align: left;
    width: 100%;
}

/* #hoverable Class Styles */
.hoverable {
    position: static;
}

.hoverable > a:after {
    content: "\25BC";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}

.hoverable:hover .mega-menu {
    display: block;
}

/* #toggle Class Styles */
.toggleable > label:after {
    content: "\25BC";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}

.toggle-input {
    display: none;
}

.toggle-input:not(checked) ~ .mega-menu {
    display: none;
}

.toggle-input:checked ~ .mega-menu {
    display: block;
}

.toggle-input:checked + label {
    color: white;
    background: rgb(3, 102, 114);

    /* @apply bg-teal-700 */
}

.toggle-input:checked ~ label:after {
    content: "\25B2";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}

/* Responsive styles */
@media (max-width: 1023px) {
    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
    }

    .menu.show {
        display: flex;
    }

    .menu > ul > li {
        width: 100%;
    }

    .menu > ul > li > a {
        display: block;
    }

    .mega-menu {
        position: static;
        width: 100%;
    }
}

.mobile-menu {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-menu {
        display: flex;
        flex-direction: column;
        background-color: white;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        padding: 1rem;
    }
}
<head>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css'>

</head>
<body>
<nav class="navbar relative bg-white border-b-2 border-gray-300 text-gray-900" style="z-index: 100;">
            <div class="container mx-auto flex justify-between">
                <div class="relative block p-4 lg:p-6 text-xl text-teal-600 font-bold">
                    <a href="#" class="hover:text-teal-900">Logo</a>
                </div>
                <button class="lg:hidden text-teal-600 hover:text-teal-900 focus:outline-none focus:text-teal-900" id="menu-toggle" aria-label="Menu Toggle">
                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                        <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                    </svg>
                </button>
                <div class="menu hidden lg:flex">
                    <ul class="flex">
                        <!--Regular Link-->
                        <li class="hover:bg-teal-700 hover:text-white">
                            <a href="#" class="relative block py-6 px-2 lg:p-6 text-sm lg:text-base font-bold">navlink</a>
                        </li>
                        <!--Hoverable Link-->
                        <li class="hoverable hover:bg-teal-700 hover:text-white">
                            <a href="#" class="relative block py-6 px-4 lg:p-6 text-sm lg:text-base font-bold hover:bg-teal-700 hover:text-white">Hover to show</a>
                            <div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-teal-700">
                                <div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
                                    <div class="w-full text-white mb-8 text-center">
                                        <h2 class="font-bold text-2xl">Listen, why don’t you wait out by the speeder.</h2>
                                        <p>our droids. They’ll have to wait outside. We don’t want them here.</p>
                                    </div>
                                    <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
                                        <div class="flex items-center">
                                            <svg class="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M3 6c0-1.1.9-2 2-2h8l4-4h2v16h-2l-4-4H5a2 2 0 0 1-2-2H1V6h2zm8 9v5H8l-1.67-5H5v-2h8v2h-2z"/>
                                            </svg>
                                            <h3 class="font-bold text-xl text-white text-bold mb-2">Tatooine</h3>
                                        </div>
                                        <p class="text-gray-100 text-sm">Thul klivian doldur thisspiasian calrissian. Garindan d8 aurra twi'lek tund polis gen'dai sola tarpals.</p>
                                        <div class="flex items-center py-3">
                                            <svg class="h-6 pr-3 fill-current text-teal-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
                                            </svg>
                                            <a href="#" class="text-white bold border-b-2 border-teal-300 hover:text-teal-900">Find out more...</a>
                                        </div>
                                    </ul>
                                    <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r-0 lg:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
                                        <div class="flex items-center">
                                            <svg class="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M4.13 12H4a2 2 0 1 0 1.8 1.11L7.86 10a2.03 2.03 0 0 0 .65-.07l1.55 1.55a2 2 0 1 0 3.72-.37L15.87 8H16a2 2 0 1 0-1.8-1.11L12.14 10a2.03 2.03 0 0 0-.65.07L9.93 8.52a2 2 0 1 0-3.72.37L4.13 12zM0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4z"/>
                                            </svg>
                                            <h3 class="font-bold text-xl text-white text-bold mb-2">Cantonica</h3>
                                        </div>
                                        <p class="text-gray-100 text-sm">Thul klivian doldur thisspiasian calrissian. Garindan d8 aurra twi'lek tund polis gen'dai sola tarpals.</p>
                                        <div class="flex items-center py-3">
                                            <svg class="h-6 pr-3 fill-current text-teal-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
                                            </svg>
                                            <a href="#" class="text-white bold border-b-2 border-teal-300 hover:text-teal-900">Find out more...</a>
                                        </div>
                                    </ul>
                                    <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-b-0 sm:border-r md:border-b-0 pb-6 pt-6 lg:pt-3">
                                        <div class="flex items-center">
                                            <svg class="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M2 4v14h14v-6l2-2v10H0V2h10L8 4H2zm10.3-.3l4 4L8 16H4v-4l8.3-8.3zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"/>
                                            </svg>
                                            <h3 class="font-bold text-xl text-white text-bold mb-2">Yavin 4</h3>
                                        </div>
                                        <p class="text-gray-100 text-sm">Thul klivian doldur thisspiasian calrissian. Garindan d8 aurra twi'lek tund polis gen'dai sola tarpals.</p>
                                        <div class="flex items-center py-3">
                                            <svg class="h-6 pr-3 fill-current text-teal-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
                                            </svg>
                                            <a href="#" class="text-white bold border-b-2 border-teal-300 hover:text-teal-900">Find out more...</a>
                                        </div>
                                    </ul>
                                    <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 pb-6 pt-6 lg:pt-3">
                                        <div class="flex items-center">
                                            <svg class="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M9 12H1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-8v2H9v-2zm0-1H0V5c0-1.1.9-2 2-2h4V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v6h-9V9H9v2zm3-8V2H8v1h4z"/>
                                            </svg>
                                            <h3 class="font-bold text-xl text-white text-bold mb-2">Alderaan</h3>
                                        </div>
                                        <p class="text-gray-100 text-sm">Thul klivian doldur thisspiasian calrissian. Garindan d8 aurra twi'lek tund polis gen'dai sola tarpals.</p>
                                        <div class="flex items-center py-3">
                                            <svg class="h-6 pr-3 fill-current text-teal-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
                                            </svg>
                                            <a href="#" class="text-white bold border-b-2 border-teal-300 hover:text-teal-900">Find out more...</a>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <!--end Hoverable Link-->
                    </ul>
                </div>
            </div>
        </nav>

我现在纠结的是如何让移动的版更整洁，理想情况下，我希望菜单项垂直堆叠，而不是一个接一个，而且整个菜单都能飞出来，而不是下拉。
任何帮助都将不胜感激。

css

1条答案

按热度按时间
zbdgwd5y

zbdgwd5y1#

你可以从<ul>链接的保持器器开始。在Tailwind中，你可以使用md:（例如）来制作响应式样式。

<head>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css'>

</head>
<body>
<nav class="navbar relative bg-white border-b-2 border-gray-300 text-gray-900" style="z-index: 100;">
            <div class="container mx-auto flex justify-between">
                <div class="relative block p-4 lg:p-6 text-xl text-teal-600 font-bold">
                    <a href="#" class="hover:text-teal-900">Logo</a>
                </div>
                <button class="lg:hidden text-teal-600 hover:text-teal-900 focus:outline-none focus:text-teal-900" id="menu-toggle" aria-label="Menu Toggle">
                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                        <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                    </svg>
                </button>
                <div class="menu hidden lg:flex">
                    <ul class="md:flex">
                        <!--Regular Link-->
                        <li class="hover:bg-teal-700 hover:text-white">
                            <a href="#" class="relative block py-6 px-2 lg:p-6 text-sm lg:text-base font-bold">navlink</a>
                        </li>
                        <!--Hoverable Link-->
                        <li class="hoverable hover:bg-teal-700 hover:text-white">
                            <a href="#" class="relative block py-6 px-4 lg:p-6 text-sm lg:text-base font-bold hover:bg-teal-700 hover:text-white">Hover to show</a>
                            <div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-teal-700">
                                <div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
                                    <div class="w-full text-white mb-8 text-center">
                                        <h2 class="font-bold text-2xl">Listen, why don’t you wait out by the speeder.</h2>
                                        <p>our droids. They’ll have to wait outside. We don’t want them here.</p>
                                    </div>
                                    <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
                                        <div class="flex items-center">
                                            <svg class="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M3 6c0-1.1.9-2 2-2h8l4-4h2v16h-2l-4-4H5a2 2 0 0 1-2-2H1V6h2zm8 9v5H8l-1.67-5H5v-2h8v2h-2z"/>
                                            </svg>
                                            <h3 class="font-bold text-xl text-white text-bold mb-2">Tatooine</h3>
                                        </div>
                                        <p class="text-gray-100 text-sm">Thul klivian doldur thisspiasian calrissian. Garindan d8 aurra twi'lek tund polis gen'dai sola tarpals.</p>
                                        <div class="flex items-center py-3">
                                            <svg class="h-6 pr-3 fill-current text-teal-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
                                            </svg>
                                            <a href="#" class="text-white bold border-b-2 border-teal-300 hover:text-teal-900">Find out more...</a>
                                        </div>
                                    </ul>
                                    <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r-0 lg:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
                                        <div class="flex items-center">
                                            <svg class="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M4.13 12H4a2 2 0 1 0 1.8 1.11L7.86 10a2.03 2.03 0 0 0 .65-.07l1.55 1.55a2 2 0 1 0 3.72-.37L15.87 8H16a2 2 0 1 0-1.8-1.11L12.14 10a2.03 2.03 0 0 0-.65.07L9.93 8.52a2 2 0 1 0-3.72.37L4.13 12zM0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4z"/>
                                            </svg>
                                            <h3 class="font-bold text-xl text-white text-bold mb-2">Cantonica</h3>
                                        </div>
                                        <p class="text-gray-100 text-sm">Thul klivian doldur thisspiasian calrissian. Garindan d8 aurra twi'lek tund polis gen'dai sola tarpals.</p>
                                        <div class="flex items-center py-3">
                                            <svg class="h-6 pr-3 fill-current text-teal-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
                                            </svg>
                                            <a href="#" class="text-white bold border-b-2 border-teal-300 hover:text-teal-900">Find out more...</a>
                                        </div>
                                    </ul>
                                    <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-b-0 sm:border-r md:border-b-0 pb-6 pt-6 lg:pt-3">
                                        <div class="flex items-center">
                                            <svg class="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M2 4v14h14v-6l2-2v10H0V2h10L8 4H2zm10.3-.3l4 4L8 16H4v-4l8.3-8.3zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"/>
                                            </svg>
                                            <h3 class="font-bold text-xl text-white text-bold mb-2">Yavin 4</h3>
                                        </div>
                                        <p class="text-gray-100 text-sm">Thul klivian doldur thisspiasian calrissian. Garindan d8 aurra twi'lek tund polis gen'dai sola tarpals.</p>
                                        <div class="flex items-center py-3">
                                            <svg class="h-6 pr-3 fill-current text-teal-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
                                            </svg>
                                            <a href="#" class="text-white bold border-b-2 border-teal-300 hover:text-teal-900">Find out more...</a>
                                        </div>
                                    </ul>
                                    <ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 pb-6 pt-6 lg:pt-3">
                                        <div class="flex items-center">
                                            <svg class="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M9 12H1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-8v2H9v-2zm0-1H0V5c0-1.1.9-2 2-2h4V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v6h-9V9H9v2zm3-8V2H8v1h4z"/>
                                            </svg>
                                            <h3 class="font-bold text-xl text-white text-bold mb-2">Alderaan</h3>
                                        </div>
                                        <p class="text-gray-100 text-sm">Thul klivian doldur thisspiasian calrissian. Garindan d8 aurra twi'lek tund polis gen'dai sola tarpals.</p>
                                        <div class="flex items-center py-3">
                                            <svg class="h-6 pr-3 fill-current text-teal-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
                                            </svg>
                                            <a href="#" class="text-white bold border-b-2 border-teal-300 hover:text-teal-900">Find out more...</a>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <!--end Hoverable Link-->
                    </ul>
                </div>
            </div>
        </nav>

查看更多：https://tailwindcss.com/docs/responsive-design

赞(0）分享  回复(0）举报  2023-04-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com