Как привязать выпадающее меню к событию нажатия кнопки?

[garmoni]

Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.

<nav class="nav">
                    <div class="nav__btn">
                              <a id="nav-toggle" href="#"><span></span>    </a>    
                    </div>
                        <ul class="nav__list">
                            <li>
                                <a href="#" class="nav__link">Episodes</a>
                            </li>
                            <li>
                                <a href="#" class="nav__link">Characters</a>
                            </li>
                            <li>
                                <a href="#" class="nav__link">Park</a>
                            </li>
                            <li>
                                <a href="#" class="nav__link">Gallery</a>
                            </li>
                            <li>
                                <a href="#" class="nav__link">actors</a>
                            </li>
                        </ul>
 </nav>

$(document).ready(function(){
   $('#nav-toggle').click(function(){
    $(this).toggleClass('active');
});

.nav__list {
	display: none;
}
#nav-toggle {position: relative; display: inline-block; width:42px; height:25px;}
#nav-toggle span { position: absolute; left: 0; top: 10px; }

#nav-toggle span, 
#nav-toggle span:before,
#nav-toggle span:after {
  position: absolute;
  display: block;
  content: '';
  height: 5px;
  width: 42px;
  background: #000;
  border-radius: 2px;
  cursor: pointer;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px; 
}

/* Добавим анимацию всех свойств для блоков нашей иконки */
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}

/* Центральный блок делаем прозрачным */
#nav-toggle.active span {
  background-color: transparent;
}

/* Смещаем псевдо-элементы в центр иконки (на место основного блока) */
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

/* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */
#nav-toggle.active span:before {
  transform: rotate(45deg);

}
#nav-toggle.active span:after {
  transform: rotate(-45deg);

}

 

[mrnobody]

https://codepen.io/corvus-007/pen/aqGagY?editors=0110

[garmoni]

Спасибо, получилось.

Еще вопрос по меню. Добавила второй уровень меню, только не получается его выровнять текст по правому краю.

<nav class="nav">
					<div class="nav__btn">
						<a id="nav-toggle" href="#"><span></span>	</a>	
					</div>
						<ul class="nav__list">
							<li>
								<a href="#" class="nav__link">Episodes</a>
							</li>
							<li>
								<a href="#" class="nav__link">Characters</a>
								<ul>
	                                <li><a href="#">Dolores</a></li>
	                                <li><a href="#">Maeve</a></li>
	                                <li><a href="#">Bernard</a></li>
	                                <li><a href="#">Ford</a></li>
	                                <li><a href="#">Man in black</a></li>
	                            </ul>
							</li>
							<li>
								<a href="#" class="nav__link">Park</a>
							</li>
							<li>
								<a href="#" class="nav__link">Gallery</a>
							</li>
							<li>
								<a href="#" class="nav__link">actors</a>
							</li>
						</ul>
					</nav>

.nav__list {
	display: none;
}
.nav__list--opened {
	display: block;
	position: absolute;
	background: #efefef;
	right: -100px;
	top: -40px;
	width: 510px;
	height: 100vh;
	padding-top: 140px; 
	z-index: 98;
}
.nav__list ul {
	width: 120px;
}
.nav__list li {
	margin: 25px 0 25px 5px;
}
.nav__link {
	font-family: Colibri, sans-serif;
	text-transform: capitalize;
	font-size: 24px;
	color: #333;
}
.nav__list li ul {
	display: none;
}
.nav__list li ul li {
	margin-bottom: 22px;
}
.nav__list li ul li a {
	color: #8f8f8f;
	font-size: 20px;
}
.nav__list li:hover ul {
	display: block;
}
#nav-toggle {
	position: relative; 
	display: inline-block; 
	width:42px; 
	height:25px;
	z-index: 99;
}
#nav-toggle span { 
	position: absolute; 
	left: 0; 
	top: 10px; 
}
#nav-toggle span, 
#nav-toggle span:before,
#nav-toggle span:after {
  position: absolute;
  display: block;
  content: '';
  height: 5px;
  width: 42px;
  background: #000;
  border-radius: 2px;
  cursor: pointer;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px; 
}

/* Добавим анимацию всех свойств для блоков нашей иконки */
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}

/* Центральный блок делаем прозрачным */
#nav-toggle.active span {
  background-color: transparent;
}

/* Смещаем псевдо-элементы в центр иконки (на место основного блока) */
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

/* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */
#nav-toggle.active span:before {
  transform: rotate(45deg);
  width: 32px;
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
  width: 32px;
}

 

Должно выглядеть так
 

[mrnobody]

И у вас опечатка в названии шрифта не Colibri, а Calibri

[garmoni]

Не могу понять, почему во вложенном меню так такие большие отступы.

они , почему то зависят от отступов главного списка

[garmoni]

Все получилось. Еще раз спасибо )