OxCom Dec 13 2016 at 18:05

Адаптивное меню без Javascript

5 min

22K

Website development*CSS*HTML*

From sandbox

Comments 12

SbWereWolf Dec 13 2016 at 23:31

опечатка: «в рамках боЛевого проекта»

-2

Andrey_Volk Dec 14 2016 at 02:45

Решение лаконичное (лаконичнее чекбоксов в данном примере ничего и не найти, наверное), но как насчет кроссбраузерности?

Veikedo Dec 14 2016 at 06:22

Вот каждый раз такой комент в статье про флексбокс.
Ну откройте вы http://caniuse.com/ и посмотрите, тем более что в минусах автор уже написал про ie.

OxCom Dec 14 2016 at 10:55

Как я указал в статье и как подметил Veikedo есть минусы с поддержкой в IE для версии младше 11.

Пример проблемы для IE10

при большой вложенности блоков с display: flex; и различных свойствах таких как: flex-direction, flex, align-items и justify-content; периодически возникает ситуация, когда IE неправильно рассчитывает размеры и позиции блоков, что приводит к крайне неприятному отображению: элементы не на своих местах, большие расстояния между блоками, неправильное выравнивание, один блок занимает все пространство контейнера и вытесняет все остальные.

Так же замечательный ресурс caniuse ( Veikedo, спасибо за напоминание ) должен вселить в Вас больше уверенности в использовании flexbox.

Почему я решил использовать flexbox и прекратить поддержку IE < 11 версии? Так случилось, что на текущем проекте мы поддерживаем только те браузеры, процент использования которых на нашем портале больше 2%. Опираясь на данные Google Analytics мы имеем:

88% — Chrome
4% — Firefox
2% — Edge
1% — YaBrowser

northicewind Dec 14 2016 at 12:49

Есть работающий polyfill в Modernizr для ie 8/9

tomgif Dec 14 2016 at 10:26

Интересное решение. Я обычно стараюсь избегать атрибута id из-за его специфичности, поэтому сам input оборачиваю в ещё один label.

Suliman Dec 14 2016 at 10:27

Когда кто-то пишет о том что label или input[type=radio] используется где-то в меню или в слайдере на css, а не в формах, сразу же закрываю такую статью… это же извращение полнейшее… есть разные типы тегов в html используйте их по назначению.

OxCom Dec 14 2016 at 11:14

Разработчику ничего не мешает применить такой подход к «правильным» HTML тегам.

Quilin Dec 14 2016 at 12:24

Просто вы счастливый человек, и с оперой мини не сталкивались, видимо.

Suliman Dec 14 2016 at 16:12

А как опера мини связана с неуместным использованием label и input[type=radio]? такой метод можно использовать только в случае если браузером не поддерживается js. никаких других причин нет так использовать теги.

Pinsky Dec 14 2016 at 11:18

В mincss можно подсмотреть как сделано меню-бутерборд(для низких разрешений экрана) без js.

xPomaHx Dec 15 2016 at 10:42

Крайне плохая практика. Однажды придется внести небольшое изменение которое не реализовать на css only и придется вообще все переделывать на js. Например в данном случае заказчик скажет, а я хочу чтобы меню открывалось по ховеру, а при клики заголовку меню чтобы оно закрывалось несмотря на то что на нем мышка.
В общем случае когда возникает вопрос как сделать на css или на js, просто посмотрите для чего то и то было придумано и будет вам ответ. А извращения подобные как в статье могут быть тока как спортивный интерес возможностей чистого ксс.

Show the best of all time