メニューでスライドを切り替えるにはどうすればいいですか？

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

NAVにクラスcollapsedを追加し、最初のトグルを削除するには、あなたの点滅の問題を解決します！そして、$menuが開いているときに、activeクラスをトグルで切り替えると、グレーのトグルが表示されます。 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; 
}