Jack Sewell Jack Sewell - 2 months ago 9
HTML Question

What is a clean way to toggle a slide in menu?

Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?

So far I have:

HTML:

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


CSS:

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


JS:

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


But with this code when the page loads you can see the menu being swept to the left, I dont want this.

How can I make my toggle button change colour when the menu is open?

Answer

Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.

Fiddle: 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;
}
Comments