<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="text" class="burger__menu-item nav">
<span id="trigger" class="trigger">
<i></i>
<i></i>
<i></i>
</span>
<ul id="menu" class="mobile-list menu">
<li class="mobile-item"><a class="mobile-link mobile-link--active">Главная</a></li>
<li class="mobile-item"><a class="mobile-link" href="photo.html">Фотографии</a></li>
<li class="mobile-item"><a class="mobile-link" href="form.html">Конкурс</a></li>
<li class="mobile-item"><a class="mobile-link" href="#">Lorem</a></li>
</ul>
</div>
</body>
</html>
//css//
body{
background:brown;
}
.burger__menu-item {
width: 100%;
text-align: center;
margin: 0; }
.mobile-link {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: #fff;
min-height: 68px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
-webkit-transition: .3s ease-out;
-o-transition: .3s ease-out;
transition: .3s ease-out; }
.mobile-link a[href]:hover, :focus {
color: #d22856; }
.mobile-link a[href]:active {
-webkit-transition: .3 ease-out;
-o-transition: .3 ease-out;
transition: .3 ease-out;
color: #fff;
opacity: .3; }
@media (max-width:640px){
.menu{display:none;}
.trigger{
display:inline-block;
margin:3px;
cursor:pointer;
}
.trigger i{
display:block;
width:30px;
height:6px;
margin:4px auto;
background:#222;
}
.show{
display:block;
}
}
//js//
document.getElementById("trigger").onclick = function() {open()};
function open() {
document.getElementById("menu").classList.toggle("show");
}
