Question

好的，所以我在我的新个人网站上工作，我已经开始使画布菜单可以切换。我是怎么做到的？

到目前为止，我有：

＆＃13;

var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');


mainNav.classList.add('collapsed');


function mainNavToggle() {
  mainNav.classList.toggle('collapsed');
}


navToggle.addEventListener('click', mainNavToggle);

＆＃13;

.collapsed {
  margin-left: -330px;
}
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  height: 100%;
  color: #212121;
  background-color: #FFFFFF;
  transition: all ease-in-out 200ms;
  box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
  display: flex;
  flex-direction: column;
  padding: 90px 0 0 30px;
}
.navigation li {
  margin-bottom: 30px;
}
.navigation a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
}
.navigation i {
  vertical-align: top;
  margin-right: 10px;
}
.navigation .double-line {
  display: inline-block;
  line-height: 1.45;
}
.navigation .double-line span {
  display: block;
  font-size: 12px;
  opacity: 0.3;
}
.clicked span {
  background-color: #000;
}
.menu-toggle {
  background-color: transparent;
  border: 0px;
  outline: 0px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px;
  background-color: #FFFFFF;
}

＆＃13;

<button class="menu-toggle" id="menu-toggle">
  <span></span>
  <span></span>
  <span></span>
</button>

<nav class="navigation" role="navigation" id="menu">
  <ul>
    /* Menu contents */
  </ul>
</nav>

＆＃13;

但是在页面加载时使用此代码可以看到菜单向左扫描，我不想要这个。

如何在菜单打开时让我的切换按钮改变颜色？

Answer 1

将类collapsed添加到导航并删除初始切换可解决您的闪烁问题！当active打开时，在切换开关上切换$menu类可以获得灰色切换！ transition CSS属性是可选的，可使bg从透明转换为灰色看起来很流畅。

小提琴：https://jsfiddle.net/mbs1kymv/1/

JS：

var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');

$toggle.addEventListener('click', function()
{
    $menu.classList.toggle('collapsed');
    $toggle.classList.toggle('active');
});

HTML：

<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>

CSS：

.menu-toggle {
  transition: background-color 0.25s;
 }

.menu-toggle.active {
  background-color: #CCC;
}

在菜单中切换幻灯片的简洁方法是什么？

1 个答案: