Створіть меню, що розкривається
Створіть меню, яке відкривається/згортається після кліку:
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;
}