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

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

Пример:

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

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

HTML:

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

CSS:

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

jQuery:

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

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

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

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

  • аноним:

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

    Ответить
    • Alexander:

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

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

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

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

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

    Ответить