Добавил раскрытие меню
This commit is contained in:
parent
17bf5cd14e
commit
c6cbc86b8a
3 changed files with 9 additions and 3 deletions
3
404.html
3
404.html
|
@ -55,8 +55,7 @@
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<h1>Ошибка 404: запрашиваемый ресурс не найден!</h1>
|
<h1>Ошибка 404: запрашиваемый ресурс не найден!</h1>
|
||||||
<br/>
|
<p>Измените запрос или <a href="/">перейдите на главную</a>.</p>
|
||||||
<p>Измените запрос или <a href="/">перейдите на главную</a></p>
|
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<div>Казанское объединение молодых поэтов</div>
|
<div>Казанское объединение молодых поэтов</div>
|
||||||
|
|
|
@ -4,9 +4,11 @@ const menu = document.getElementById('menu')
|
||||||
function toggleMenu() {
|
function toggleMenu() {
|
||||||
if (menu.className == '') {
|
if (menu.className == '') {
|
||||||
menu.className = button.className = 'active'
|
menu.className = button.className = 'active'
|
||||||
|
menu.style.maxHeight = menu.scrollHeight + 'px'
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
menu.className = button.className = ''
|
menu.className = button.className = ''
|
||||||
|
menu.style.maxHeight = null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -86,6 +86,9 @@ header {
|
||||||
|
|
||||||
#menu {
|
#menu {
|
||||||
display: none;
|
display: none;
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 0;
|
||||||
|
transition: max-height .2s ease-out
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu .button {
|
#menu .button {
|
||||||
|
@ -168,6 +171,7 @@ label p {
|
||||||
|
|
||||||
.input:hover {
|
.input:hover {
|
||||||
border-color: color-mix(in srgb, var(--border-color), black 30%);
|
border-color: color-mix(in srgb, var(--border-color), black 30%);
|
||||||
|
transition: border-color .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input:focus {
|
.input:focus {
|
||||||
|
@ -196,6 +200,7 @@ input[type=submit] {
|
||||||
|
|
||||||
input[type=submit]:hover {
|
input[type=submit]:hover {
|
||||||
background: color-mix(in srgb, var(--accent-color), black 20%);
|
background: color-mix(in srgb, var(--accent-color), black 20%);
|
||||||
|
transition: background-color .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
@ -274,7 +279,7 @@ footer a:first-child {
|
||||||
.right > button {
|
.right > button {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#menu.active {
|
#menu {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue