При клике на ПРОДУКЦИЯ/ПОРТФОЛИО
нужно, чтобы выпадало меню, и при повторном нажатии - обратно исчезало.
Нужно сделать методом JS. У меня получилось сделать так, чтобы меню появлялось, а как сделать, чтобы оно исчезало при повторном нажатии?
var title = document.getElementById('title');
function show(){
title.style.display = 'block';
}
.dropdown {
height: 40px;
width: 300px;
cursor: pointer;
}
.dropdown h3 {
font-size: 18px;
color: #808080;
height: 30px;
text-transform: uppercase;
transition: all 1s ease-out;
}
.dropdown:hover h3 {
font-weight: 700;
color: #a87f5c;
transition: all 0.5s ease-out;
}
.dropdown_content {
display: none;
transition: all linear 0.3s;
color: white;
background-color: #a87f5c;
padding: 1em;
margin-left: 0.8em;
margin-top: -20px;
width: 190px;
opacity: 0.98;
height: 98px;
}
.dropdown_content a {
text-decoration: none;
color: white;
font-size: 18px;
text-align: left;
display: block;
transition: .6s all ease;
margin-bottom: 5px;
white-space: nowrap;
}
.dropdown_content a:hover {
color: white;
margin-left: 11px;
}
<div class="dropdown">
<h3 href="pages/storage.html" onclick="show()">Продукция / портфолио</h3>
<div class="dropdown_content" id="title">
<a href="pages/tables.html">Столы</a>
<a href="pages/storage.html">Мебель для хранения</a>
<a href="pages/interior.html">Интерьер</a>
<a href="pages/storage.html">Всё</a>
</div>
</div>