У меня есть следующий довольно простой CSS для отображения меню с помощью CSS: target
nav {
position: absolute;
height: 100vh;
display: block;
width: 20vw;
margin-left: -30vw;
transition: margin-left 0.5s ease-in;
background-color: lightgrey;
}
nav:target {
margin-left: 0vw;
}
и некоторые примеры HTML:
<body>
<nav id="menu">
<a href="#">Close</a>
</nav>
<a href="#menu">Show menu</a>
</body>
</html>
Пока это работает, в Google Chrome при загрузке страницы меню выдвигается.
Я понял, что это происходит, только если это вечная таблица стилей. Если я использую теги <style> и вставляю CSS на страницу, она работает как положено: меню полностью невидимо, пока не нажата ссылка.
Похоже, что Google Chrome видит изменение от не примененных стилей при загрузке страницы к применению стилей в таблице стилей как к изменению свойства margin-left и отображает переход.
Есть ли способ достичь того же результата с помощью встроенных стилей или тега <style>? Я могу применить свойство transition к nav:target вместо nav, но тогда меню только анимируется при скольжении, оно не выдвигается и просто исчезает.