На телефонах очень сложно мотать и искать нужный контент, на этот случай делают меню снизу:
Его можно украшать и менять под тематику сайта, но смысл один — "Помочь пользователям сайта!". Для его создания нам не понадобится js, его очень легко сделать!
Начнём же!
Как обычно мы начнём с html разметки, я добавил разные(странные) классы, чтобы вы смогли спокойно встроить это к себе на сайт не проверяя css!
Но тут интересная особенность, взглянем сюда:
<meta name="viewport" content="width=device-width">
Эту строку Вы скорее всего не встречали, она спрашивает у браузера размер устройства, просматривающего наш сайт, зачем? мы сделаем чтобы панель отображалась только на телефонах!
Теперь пойдём к css:
Код маленький, но есть интересные команды, которые на моих уроках мы ещё не встречали!
Начнём с незнакомых по порядку:
display
Отвечает за отображение контента, который мы настраиваем.
В css он встречается с значениями none, inline-block и fixed!
none - контент не будет отображаться;
inline-block - блоки будут идти по порядку слева направо, а не сверху вниз;
flex - блок будет зафиксирован, и не пропадать при прокрутке.
Настраиваю flex нам надо указать где он будет закреплён, для этого после него идут атрибуты right, left и bottom, а после них нули означают что будет закреплено внизу без отступов.
Теперь последний новая команда, это:
@media (max-width:1000px) { }
Помните мы спрашивали у браузера размер устройства? Так вот, всё что внутри неё, это настройки, которые будут работать только телефонах и планшетах, чья ширина меньше 1000 пикселей.
Вот и всё, теперь можно встроить это себе на сайт, и переделать!
Вот мы и закончили, подписывайтесь и ставьте лайки!