Просте адаптивне меню з кнопкою закрити на css

Просте адаптивне меню з кнопкою "Закрити" на CSS

Перевірити меню на адаптивність і виконати всі маніпуляції самостійно можна на сторінці прикладу, змінюючи розміри вікна браузера або зайшовши з мобільного пристрою.

ПРИКЛАД
Для всього цього дива знадобився ось такий спрайт з іконками "бургера" і хрестика:

Код меню самий звичайний, який більшість використовує для створення навігації по сайту:

Основний CSS включає в себе і скидання стилів для блоків, псевдокласів і псевдоелементів. використовуваних в коді, при непотрібності його можна видалити.

ad-menu *: focus, .ad-menu * :: before, .ad-menu * :: after padding: 0;
margin: 0;
outline: 0;
box-sizing: content-box; / * Це властивість обов'язково * /
>
.ad-menu li display: inline-block;
background: # c2f272;
font-size: 1.4em;
text-align: center;
width: 24%;
>
.ad-menu li: hover background: # f2d272;
>
.ad-menu li a display: block;
text-decoration: none;
color: # 000;
padding: 10px 0;
width: 100%;
>

Тепер залишилося задати правила адаптивності. а саме властивості відображення меню для різних розмірів екрану і прописати функціонал відкриття і закриття меню.

/ * Поведінку меню при вирішенні менш 920 пікселів * /
@media screen and (max-width: 920px) .ad-menu li width: 49.5%;
>
>
/ * Поведінки і структура при екрані менше 680 пікселів * /
@media screen and (max-width: 680px) .ad-menu li width: 100%;
>
.ad-menu ul display: none;
>
.ad-menu nav :: before,
.ad-menu :: after content: '';
position: absolute;
top: 0;
right: 0;
display: block;
background-image: url (data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAE5JREFUeAFjwAkYcQC6SFAKBt4fo / 6AaMMUQTUQIYJpFaqrMIICzkATR2Hi5uDUjmkh7tDAHUq4Qw8ujl + CsFEEHDVowg1n1OJKDLiTDwBLrgJ9vkuXOwAAAABJRU5ErkJggg ==);
cursor: pointer;
height: 24px;
width: 24px;
>
.ad-menu nav :: before,
.ad-menu :: after background-color: # fc0;
border: 9px solid # fc0;
>
.ad-menu :: after background-position: -24px -24px;
z-index: 1;
>
.ad-menu nav :: before z-index: 2;
>
.ad-menu nav: focus :: before z-index: 0;
>
.ad-menu nav: focus ul,
.ad-menu ul: hover display: block;
>
>

Робота меню реалізована за допомогою псевдокласу: focus. для цього до тегу контейнера