当用户打开菜单时，有没有办法在 'overflow: hidden' 元素的子元素上显示内容？

Question

我正在制作一个响应式菜单，我有一个 link，当您将鼠标悬停在它上面时，侧面菜单会从右侧滑到屏幕上，但是当我使用 'overflow-x: hidden' 执行此操作时该菜单上的所有内容 none 都存在，尽管 'overflow: visible' 整个页面可以向右滚动，因为菜单显示 'transformX: (-100%)' 直到悬停，然后 'transformX: (0%)'.

此外，我的 'all categories' 按钮不起作用，这应该从“#mobile-sub-menu”元素中删除 class 'opened'，但没有任何反应.

Answer 1

我做了更改，我在这里分享代码。

https://codepen.io/_makki/pen/QWqXmgm

    <header style="overflow-x:hidden" class="barAnimation1" id="mobile-header">
        <nav>
            <div class="mobile-header">

                <a class="mobile-email" href="mailto:sales@hsl.co.uk">
                    <img src="/wp-content/uploads/2022/01/HSL-email-icon.svg" alt="Email Icon">
                </a>

                <a class="navbar-brand d-xl-none" href="<?php echo get_site_url(); ?>"><img
                        src="/wp-content/uploads/2021/11/hsl-logo.svg">
                </a>

                <button class="mobile-menu-btn">
                    <img src="/wp-content/uploads/2022/01/HSL-menu-icon.svg" alt="Menu Icon">
                </button>

                <!--  Use flexbox utility classes to change how the child elements are justified  -->
            </div>
        </nav>
    </header>

 <div id="main-mobile-menu">

                    <button class="mobile-menu-close-btn">
                        <img src="/wp-content/uploads/2022/01/HSL-close-menu-icon.svg" alt="Close Menu Icon">
                    </button>

                    <ul id="menu-mobile-menu" class="navbar-nav">
                        <li class="nav-item">
                            <a href="https://hsl.hyphendemo.co.uk/" class="nav-link">Home</a>
                        </li>

                        <li class="nav-item">
                            <a href="https://hsl.hyphendemo.co.uk/about/" class="nav-link ">About Us</a>
                        </li>

                        <li id="menu-item" class="nav-item">
                            <a href="#" class="nav-link">Products</a>
                            <div id="mobile-sub-menu">
                                <button class="sub-close">
                                    All Categories
                                </button>
                                <ul class="navbar-nav">
                                    <li class="nav-header">
                                        <a>
                                            Products
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="https://hsl.hyphendemo.co.uk/departments/ophthalmology/"
                                            class="nav-link">Ophthalmology</a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="https://hsl.hyphendemo.co.uk/departments/diagnostic-imaging/"
                                            class="nav-link">Diagnostic Imaging</a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="https://hsl.hyphendemo.co.uk/surgical-equipment/"
                                            class="nav-link">Surgical
                                            Equipment</a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="https://hsl.hyphendemo.co.uk/departments/healthcare-technology/"
                                            class="nav-link">Healthcare Technology</a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        <li id="menu-item" class="nav-item">
                            <a href="#" class="nav-link">Services</a>
                        </li>

                        <li id="menu-item-" class="nav-item">
                            <a href="#" class="nav-link">Specialties</a>
                        </li>

                        <li id="menu-item" class="nav-item">
                            <a href="#" class="nav-link">Communications</a>
                        </li>

                        <li class="nav-item">
                            <a href="https://hsl.hyphendemo.co.uk/news/" class="nav-link">News</a>
                        </li>

                        <li class="nav-item">
                            <a href="https://hsl.hyphendemo.co.uk/contact/" class="nav-link">Contact</a>
                        </li>
                    </ul>
                </div>

还更改了侧边菜单的 CSS。（main-mobile-menu 从绝对位置固定）

  #mobile-header {
    display: block;
  }
  header {
    padding: 0;
    padding-top: 8px;
  }
  #desktop-header {
    display: none;
  }

  #main-mobile-menu {
    position: fixed;
    background-color: white;
    z-index: 1000;
    width: 80%;
    height: 100vh;
    top: 0;
    right: 0;
    padding: 75px;
    transform: translateX(100%);
    transition: 0.5s ease-in-out;
  }
  #main-mobile-menu.opened {
    transform: translateX(0);
  }
  #mobile-sub-menu {
    position: absolute;
    background-color: white;
    z-index: 1004;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    padding: 75px;
    transform: translateX(100%);
    transition: 0.5s ease-in-out;
    right: 0;
  }
  .navbar-nav {
    margin-top: 100px;
  }
  #mobile-sub-menu.opened {
    transform: translateX(0);
  }
  #mobile-sub-menu.nav-link {
    padding: 5px 0;
    margin: 5px 0;
  }
  .sub-close {
    position: absolute;
    top: 50px;
    left: 75px;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 400;
    padding: 0;
    border: none;
    background-color: transparent;
  }
  .nav-link {
    font-size: 22px;
    font-weight: 400;
    color: #535d65;
    padding: 10px 0;
    margin: 10px 0;
    border-bottom: 2px solid transparent;
    transition: 0.3s ease-in-out;
  }
  .nav-link:hover {
    border-bottom-color: #a01c29;
    color: #535d65;
  }
  #mobile-sub-menu .nav-link {
    font-size: 18px;
    padding: 5px 0;
    margin: 5px 0;
  }
  .nav-header a {
    font-size: 22px;
  }
  .nav-header {
    margin-bottom: 30px;
  }
  .nav-header:hover {
    color: #535d65;
  }
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    height: 100px;
  }
  .mobile-email {
    position: absolute;
    top: 50%;
    left: 75px;
    transform: translateY(-50%);
  }
  .mobile-email img,
  .mobile-menu-btn img,
  .mobile-menu-close-btn img {
    width: 50px;
  }
  .mobile-menu-btn {
    padding: 0;
    border: none;
    background-color: transparent;
    position: absolute;
    top: 50%;
    right: 75px;
    transform: translateY(-50%);
  }
  .navbar-brand {
    padding: 0;
    font-size: medium;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .holding > a {
    display: none;
  }
  .mobile-menu-close-btn {
    padding: 0;
    border: none;
    background-color: transparent;
    z-index: 100000;
    position: absolute;
    right: 75px;
    top: 50px;
    transform: translateY(-50%);
  }
  #bigDropdown {
    display: none;
  }

当用户打开菜单时，有没有办法在 'overflow: hidden' 元素的子元素上显示内容？

Is there a way to show content on a child of an element that is 'overflow: hidden' when the user opens the menu?

html

css

transform

overflow

responsive