Slidenav onclick右键问题HTML CSS JAVASCRIPT

我的幻灯片点击导航没有什么问题

这是我的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>

这是我对这部分的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按钮工作正常，但当“移动菜单”打开或即将关闭时，导航中的段落将被包装。这纯粹是化妆品的问题，我觉得不太好。以下是我想说的一些照片：

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

这是移动菜单，当它要隐藏到右侧时，单击“x”后

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

另一件事是，我希望能够通过点击菜单之外的任何地方来关闭菜单。有人知道我怎样才能做到吗？我必须在这里使用很多js吗

你也可以在这里查看整个网站。移动菜单仅在较小的窗口大小上显示

---

如果整个主题不清楚，请致以最诚挚的问候，并表示歉意。请随时询问

将文本设置为

空白：nowrap

将阻止它在

下拉内容项文本

和徽标下面的段落上换行

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

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

   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";
} 

---

将文本设置为

空白：nowrap

将阻止它在

下拉内容项文本和徽标下面的段落上换行

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

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

   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";
} 

我认为您可以滑动右菜单，因为位置是固定的，您必须将此css设置为菜单mobile div的body或parrent
overflow-x:hidden

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

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

我认为您可以滑动右菜单，因为位置是固定的，您必须将此css设置为菜单mobile div的body或parrent
overflow-x:hidden

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

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