Скрыть меню в CSS можно использовав свойство display
и задав ему значение none
.
Пример CSS-кода:
.menu {
display: none;
}
Этот код скрывает элементы с классом .menu
.
Чтобы сделать меню снова видимым, можно использовать JavaScript для добавления класса смены display
на странице.
Пример JavaScript-кода:
document.querySelector('.toggle-menu').addEventListener('click', function() {
document.querySelector('.menu').classList.toggle('active');
});
Этот код добавляет обработчик событий на клик по элементу с классом toggle-menu
. Когда происходит клик на этом элементе, класс active
добавляется элементу с классом menu
, который изменит свойство display
на block
. Важно убедиться, что у элемента с классом .menu
есть правильные стили, которые приведут его в нужный вид при изменении свойства display
.
Существует также специальное значение visibility
, которое можно использовать для скрытия элементов, не меняя их позицию на странице. Чтобы элемент был скрыт с использованием visibility
, можно задать ему значение hidden
:
.menu {
visibility: hidden;
}
Этот код скрывает элемент с классом .menu
, но не изменяет его позиции на странице.
Чтобы сделать элемент снова видимым, можно использовать JavaScript для изменения значения свойства visibility
на visible
.
document.querySelector('.toggle-menu').addEventListener('click', function() {
document.querySelector('.menu').style.visibility = 'visible';
});
Этот код добавляет обработчик событий на клик по элементу с классом toggle-menu
. Когда происходит клик на этом элементе, свойство visibility
элемента с классом .menu
изменяется на значение visible
.