Question

对于访问我的网站的手机和平板电脑，我几乎没有侧边菜单。问题在于，打开菜单的汉堡包图标在顶部栏的右侧，但是菜单从左侧打开。我也想从右侧打开菜单。我必须改变什么？

这是我的代码（摘自w3schools）：

    <nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
  <a href="Inicio.html" onclick="w3_close()" class="w3-bar-item w3-button">INICIO</a>
  <a href="Stock.html" onclick="w3_close()" class="w3-bar-item w3-button">NUESTROS COCHES</a>
  <a href="Contacto.html" onclick="w3_close()" class="w3-bar-item w3-button">CONTACTO</a>
</nav>

这是JS脚本：

var mySidebar = document.getElementById("mySidebar");

function w3_open() {
    if (mySidebar.style.display === 'block') {
        mySidebar.style.display = 'none';
    } else {
        mySidebar.style.display = 'block';
    }
}

// Close the sidebar with the close button
function w3_close() {
    mySidebar.style.display = "none";
}

CSS是W3，您可以在以下链接中找到它：https://www.w3schools.com/w3css/4/w3.css

Answer 1

如果您遵循w3侧边栏示例，他们将在页面底部显示如何将其移至右侧：

https://www.w3schools.com/w3css/w3css_sidebar.asp

Answer 2

可以很容易地修复它。您只需要将w3-animate-left切换为w3-animate-right。这将使用正确的动画从移出屏幕右侧。

动画制作完成后，还需要使侧栏保持在屏幕的右侧。为此，只需将right: 0添加到.w3-sidebar。

.w3-sidebar {
    right: 0;
}

阅读the rest of the post也很有帮助（请参阅标题为“右侧导航”的小节）。 ;）

var mySidebar = document.getElementById("mySidebar");

function w3_open() {
  if (mySidebar.style.display === 'block') {
    mySidebar.style.display = 'none';
  } else {
    mySidebar.style.display = 'block';
  }
}

// Close the sidebar with the close button
function w3_close() {
  mySidebar.style.display = "none";
}

.w3-sidebar {
  right: 0;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" type="text/css">

<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-right w3-hide-medium w3-hide-large" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
  <a href="#" onclick="w3_close()" class="w3-bar-item w3-button">INICIO</a>
  <a href="#" onclick="w3_close()" class="w3-bar-item w3-button">NUESTROS COCHES</a>
  <a href="#" onclick="w3_close()" class="w3-bar-item w3-button">CONTACTO</a>
</nav>

<button onclick="w3_open()">Open<button>

更改响应式侧面菜单的位置

2 个答案: