Мобильный Tab Bar с вкладками

Tab Bar выполнен с применением библиотеки jQuery и может использоваться как каркас всего сайта или определенной его секции.

Пример:

Для большей наглядности в пример добавлен мобильник. В HTML, CSS и JS кодах его нет.

Оригинальный вид страницы с таб-баром можно посмотреть по ссылке

HTML:

Иконки, которые прорисовываются как в примере, можно взять в теме Сборник SVG иконок Feather

CSS:

Если Tab Bar используется не на странице, а в секции - нужно будет изменить все величины прияязанные к вьюпорту (width: 500vw, height: 100vh; и другие)

jQuery:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Андрей:

    Привет, Админ!

    было бы здорово, если бы был код для навигации внутри одной страницы между #секциями
    может завалялся такой на сайте?

    Ответить
  • Влад:

    Если во вкладке 1 множество ссылок с переходом на внутренние страницы сайта.
    По клику по ссылке попадаешь на внутреннюю страницу.
    И 1 вкладка подгружается с самого верха.
    То есть если я промотал сайт почти что до конца и решил перейти по статье после чего вернуться назад , мне придется вновь свайпать до самого низа. Проблема в overflow. Подумаю как исправить.

    Ответить
    • Влад:

      решил проблему удалением

      Ответить
  • аноним:

    Очень удобное и взвешенное решение. Жалко, что табы, а не отдельные страницы

    Ответить
    • Alexander:

      На страницах анимации не будет, если только подгружать их, а не открывать на новой странице.
      Или делать задержку - сперва иконка перешла, а потом пошла загрузка страницы.

      Ответить
  • Тимофей:

    Классно получилось, чем напоминает Инстаграм, уже думаю, как применить такую диковинку)) у себя на сайте)) Спасибо админу, за хорошие идеи.

    Ответить
  • Анатолий Сергеевич:

    Очень круто. Спасибо. Подписался на телегу вашу.

    Ответить