Я делаю правое меню в чистом виде CSS, вдохновленное этим меню Эрика Тервана. Однако у меню Эрика есть некоторые проблемы - поскольку оно отображается за пределами экрана, когда оно скрыто, оно сбивает с толку такие инструменты, как Google Search Console, и даже несмотря на то, что оно использует overflow-x: hidden в элементе body, его все равно можно перетащить на мобильный телефон (по крайней мере, iOS).
Я решил попробовать другой подход и вместо этого разместить меню на странице, но скрыть его по умолчанию и анимировать ширину при переключении видимости. Кажется, он работает достаточно хорошо (обратите внимание - я еще не закончил стилизовать гамбургер-меню, поэтому пока это просто флажок), но у меня есть проблема.
- При отображении меню анимация работает как и ожидалось (красиво выдвигается)
- При скрытии меню переход, кажется, не срабатывает, и меню сразу же сворачивается
Как сделать так, чтобы моя анимация работала, когда сворачивание меню? Разумен ли такой подход? Приемлемо ли такое поведение с точки зрения использования этого со средствами чтения с экрана?
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px;
right: 0;
position: absolute;
width: auto;
}
nav div {
width: 60px;
visibility:collapse;
transition: width 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
nav input {
display: block;
margin-left: auto;
margin-right: 0;
}
nav input:checked~div {
width:200px;
visibility: visible;
transition: width 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
background-color: cadetblue;
}
nav a {
display: block;
background-color:cadetblue;
color:cornsilk;
margin: 5pt;
padding: 5pt;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
</head>
<body>
<nav role="navigation">
<input type="checkbox" aria-label="Toggle menu" />
<div>
<a href="https://stackoverflow.com">Stackoverflow</a>
<a href="https://google.com">Google</a>
<a href="https://bing.com">Bing</a>
</div>
</nav>
</body>
</html>