什么是在菜单中切换幻灯片的干净方式？

Question

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

到目前为止，我有：

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);

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

<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>

但随着加载页面时，你可以看到菜单被横扫到左侧的代码，我不想要这个。

当菜单打开时，我怎样才能让我的切换按钮改变颜色？

Answer 1

将类collapsed添加到导航并删除初始切换可解决您的闪烁问题！切换active类的开关会在$menu打开时变为灰色切换！ 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; 
}