Как свернуть меню на экране с расширением 600 px?

[Espey]

Как свернуть меню на экране с расширением 600 px?

Вот скриншот обычного меню на экране обычного телефона:



И вот более на широком:



Тоесть меню открыто, а я хотел его спрятать. Подскажите пожалуйста как это сделать?

Сайт https://www.amen.in.ua/

[Nexus]

// throttle - [url]https://learn.javascript.ru/task/throttle[/url]
window.addEventListener('resize', throttle(function (e) {
    if (window.innerWidth > 600) {
        return;
    }
    
    // rollup menu
}, 30));

[voraa]

Наверно надо оставлять кнопку Открыть/Свернуть меню и для таких размеров.

[Espey]

Nexus и куда этот код внести? Да voraa!

[Nexus]

Nexus и куда этот код внести?

Куда хотите.

[Espey]

В index.php?

А через CSS не как не сделать?

[Malleys]

А через CSS не как не сделать?

Конечно можно сделать полностью на CSS...

<input type="checkbox" id="menu-toggler">

<label for="menu-toggler">
	<span class="open">Раскрыть меню</span>
	<span class="close">Свернуть меню</span>
</label>

<ul class="menu">
	<li><a href="/">Главная</a></li>
	<li><a href="/random.html">Случайное</a></li>
	<li><a href="/mp3.html" rel="nofollow">Mp3</a></li>
	<li><a href="/txt.html" rel="nofollow">TXT</a></li>
	<li><a href="/commandments.html">Заповеди</a></li>
	<li><a href="http://jesus.cc.ua/" target="_blank" rel="noopener noreferrer">Чат</a></li>
	<li><a href="/reviews.html">Отзывы</a></li>
	<li><a href="/search.html">Поиск</a></li>
	<li><a href="http://www.home.cc.ua/">+</a></li>
</ul>

<style>
html { font: 13px / 1.5 Arial, sans-serif; }

#menu-toggler {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

[for="menu-toggler"] {
	display: block;
	margin-left: auto;
	width: max-content;
	background-color: #095197;
	background-image: linear-gradient(#0087d1,#095197);
	border-color: #00456b #095197 hsl(201,100%,16%);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.33);
	padding: 0.5em;
	border-radius: 0.25em;
}

ul.menu {
	background-color: #eee;
	background-image: linear-gradient(#eee,#ddd);
	border-color: #b2b2b2 #b2b2b2 hsl(114,0%,62.5%);
	text-shadow: 0 1px 1px rgba(255,255,255,0.49);
	color: #095197;
	border: solid 1px #D5D5D5;
	box-shadow: 0 1px 0 #FFF inset, 0 1px 5px rgba(0,0,0,0.1);
	text-transform: uppercase;
	list-style: none;
	padding: 0;
}

ul.menu li {
	margin: 0;
	padding: 0;
	display: inline-block;
}

ul.menu a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
	margin: 0;
	display: block;
	padding: 12px 15px;
	position: relative;
}

@media (min-width: 800px) {
	[for="menu-toggler"] {
		display: none;
	}
	
	ul.menu a {
		border-right: 1px solid #ddd;
		box-shadow: 1px 0 0 #f5f5f5;
	}
}

@media (max-width: 800px) {
	ul.menu li {
		display: block;
		border-bottom: 1px solid #ddd;
		box-shadow: 0 1px 0 #f5f5f5;
		text-align: center;
	}
	
	#menu-toggler:not(:checked) ~ [for="menu-toggler"] .close,
	#menu-toggler:checked ~ [for="menu-toggler"] .open,
	#menu-toggler:not(:checked) ~ ul.menu {
		display: none;
	}
}

</style>

<!-- только для того, чтобы быстро проверить, как работает меню -->
<button style="margin-top: 5em;" onclick="var w=open('about:blank','','width=900,height=500');w.document.body.innerHTML=document.body.innerHTML.replace(/<button.*$/gim,'')">Нажми, чтобы проверить, как меню подстраивается под разные размеры окна</button>