Создать раскрывающееся меню
Создать меню, которое по нажатию открывается либо закрывается:
P.S. HTML/CSS исходного документа можно и нужно менять.
HTML/CSS
Для начала создадим разметку HTML/CSS нашего меню.
Меню – это отдельный графический компонент на странице, так что его лучше вынести в отдельный DOM-элемент.
Список пунктов меню может быть представлен в виде списка ul/li
.
Пример HTML-структуры:
<
div
class
=
"
menu"
>
<
span
class
=
"
title"
>
Сладости (нажми меня)!</
span
>
<
ul
>
<
li
>
Пирожное</
li
>
<
li
>
Пончик</
li
>
<
li
>
Мёд</
li
>
</
ul
>
</
div
>
Для заголовка мы используем тег <span>
, потому что <div>
, как и любой блочный элемент, имеет скрытое свойство display:block
, а значит, занимает ширину 100%.
Например:
<
div
style
=
"
border
:
solid red
1
px
"
onclick
=
"
alert
(
1
)
"
>
Сладости (нажми меня)!</
div
>
Таким образом, если мы зададим обработчик события onclick
, то он будет срабатывать по клику на всей ширине поля.
…тег <span>
– строчный элемент, по умолчанию имеет свойство display: inline
, который занимает ровно столько места, сколько занимает сам текст:
<
span
style
=
"
border
:
solid red
1
px
"
onclick
=
"
alert
(
1
)
"
>
Сладости (нажми меня)!</
span
>
Переключение меню
Переключение меню должно менять стрелку и скрывать или показывать список элементов меню.
Все эти изменения прекрасно обрабатываются средствами CSS. Посредством JavaScript мы будем отмечать текущее состояние меню, добавляя или удаляя класс .open
.
Без класса .open
меню будет закрыто:
.menu
ul
{
margin
:
0
;
list-style
:
none;
padding-left
:
20
px
;
display
:
none;
}
.menu
.title
::before
{
content
:
'▶ '
;
font-size
:
80
%
;
color
:
green
;
}
…А с ним (с классом .open
) стрелка будет меняться, и список будет показываться:
.menu
.open
.title
::before
{
content
:
'▼ '
;
}
.menu
.open
ul
{
display
:
block;
}