Slidenav onclick 从正确的问题 HTML CSS JAVASCRIPT

Question

我的幻灯片点击导航遇到了一些问题。

这是我的 HTML

<div id="menu-mobile" class="menu-mobile">
    <div class="menu-mobile-close" onclick=closeNav()>
        <p>x</p>
    </div>
    <div class="menu-mobile-header">
        <img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>
        <p>Zapraszamy do kontaktu!</p>
    </div>
    <a href="index.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="20px" height="20px" src="img/Home_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="home">Strona główna</p>
        </div>
    </div></a>
    <a href="about.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="20px" height="20px" src="img/About_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="about">O nas</p>
        </div>
    </div></a>
    <a href="gallery.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="20px" height="15px" src="img/Gallery_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="gallery">Galeria</p>
        </div>
    </div></a>
    <a href="contact.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="20px" height="15px" src="img/Contact_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="contact">Kontakt</p>
        </div>
    </div></a>
    <a href="advices.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="15px" height="20px" src="img/Advices2_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="advices">Pomoc / Porady</p>
        </div>
    </div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background">
    
</div>

<div class="menu-slider" onclick=openNav()>

</div>

这是我的 CSS：

.menu-slider {
    display: block;
    position: relative;
    background-image: url("img/Dropdown_menu_orange.png");
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    height: 35px;
    width: 35px;
    margin: 0px 0px 0px 10px;   
}

.menu-slider:hover {
    cursor: pointer;
}

.menu-mobile {
    display: block;
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    background-color: rgba(100,100,100,1);
    overflow-x: hidden;
    padding-top: ;
    transition: 1s;
}

.menu-mobile-close {
    position: absolute;
    top: 5px;
    right: 10px;
    transition: 0.05s;
}

.menu-mobile-background {
    right: 0;
    top: 0;
    transition: 0.2s;
    position: fixed;
    overflow: hidden;
    z-index: 9998;
    width: 0px;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

.menu-mobile-header {
    padding: 16px;
    text-align: center;
    background-color: white;
}

.menu-mobile-header p {
    font-family: Open Sans;
    font-size: 14px;
    color: rgba(100,100,100,1);
    padding: 2px;
    font-weight: 500;
    display: block;
}

.menu-mobile-header img {
    margin: 0 auto;
    height: 50px;
    padding-bottom: 6px;

}

.menu-mobile-close p:hover {
    color: rgba(240,240,240,1);
    cursor: pointer;
}

.menu-mobile-close p {
    font-family: Open Sans;
    font-size: 18px;
    color: rgba(100,100,100,1);
    font-weight: 600;
    display: block;
}

.dropdown-content-item {
    min-width: 100%;
    transition: 0.1s;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding: 10px;
    padding-top: 15px;
    margin: 0;
    flex-wrap: nowrap;
}

.dropdown-content-item-text p {
    font-family: Open Sans;
    font-size: 13px;
    color: white;
    padding: 10px;
    padding-left: 0;    
    margin: 0;
    display: block;
}

.dropdown-content-item-text {
    padding: 0;
    margin: 0;
}

.dropdown-content-item-icon {
    width: 50px;
    display: flex;
    margin: 0;
}

.dropdown-content-item-icon img {
    margin: 0 auto;
}

.dropdown-content-item:hover {
    background-color: rgba(150,150,150,1);
}

这是我这部分的 JS：

  function openNav() {
        document.getElementById("menu-mobile").style.width = "250px";
        document.getElementById("menu-mobile-background").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("menu-mobile").style.width = "0px";
        document.getElementById("menu-mobile-background").style.width = "0px";
    }

openNav 和 closeNav 按钮可以正常工作，但是当“menu-mobile”正在打开或即将关闭时，导航中的段落会被包装。这纯粹是美容问题，对我来说看起来不太好。以下是我想说的一些照片：

这是已经通过点击网站上的菜单按钮打开的移动菜单。

这是移动菜单，当它要向右隐藏时点击“x”。

您知道如何使此文本在关闭时不换行吗？

另一件事是我希望能够通过单击菜单之外的任何位置来关闭菜单。有谁知道我怎样才能做到这一点？这里是不是要用很多js？

你也可以在这里www.pozanprzeprowadzki.pl查看整个网站。移动菜单仅在较小的窗口尺寸上显示。

如果整个主题不清楚，最好的问候和抱歉。欢迎询问

Answer 1

将文本设置为white-space: nowrap 将阻止它在dropdown-content-item-text 和徽标下方的段落中换行。

但是其他东西被压扁了，你需要给它一个固定的宽度。

我认为更好的方法是将整个东西移到视口之外看起来会更好，如下所示：

   function openNav() {
        document.getElementById("menu-mobile").style.transform = "translateX(0)";
        document.getElementById("menu-mobile-background").style.width = "100%";
    }

function closeNav() {
    document.getElementById("menu-mobile").style.transform = "translateX(100vw)";
    document.getElementById("menu-mobile-background").style.width = "0px";
} 

Answer 2

我认为您可以向右滑动菜单，因为位置是固定的，您必须将此 css 设置为 menu-mobile div overflow-x: hidden 的主体或父级；

     function openNav() {
        document.getElementById("menu-mobile").style.right= "0px";
    }

    function closeNav() {
        document.getElementById("menu-mobile").style.right= "-250px";
    }