Виджет с красивой навигацией в нижней части

Разработка Виджет с красивой навигацией в нижней части

Нет прав для скачивания
Виджет с красивой навигацией в нижней части.
Пишем наш код HTML:
HTML:
<div class="container">
  <div class="source"><a target="blank" href="https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern"><span>inspered from </span>Aurélien Salomon</a></div>
  <div class="phone">
    <div class="phone-footer">
      <div class="nav">
        <div class="nav-item">
          <label for="Home"></label>
          <input type="radio" name="nav" value="Home" id="Home" checked="checked"/><span>Home</span>
        </div>
        <div class="nav-item">
          <label for="Likes"></label>
          <input type="radio" name="nav" value="Likes" id="Likes"/><span>Likes</span>
        </div>
        <div class="nav-item">
          <label for="Search"></label>
          <input type="radio" name="nav" value="Search" id="Search"/><span>Search</span>
        </div>
        <div class="nav-item">
          <label for="Profile"></label>
          <input type="radio" name="nav" value="Profile" id="Profile"/><span>Profile</span>
        </div>
      </div>
    </div>
  </div>
</div>
Пишем наш стиль:
Sass:
// variables
$body-bg-color: #414361
$phone-bg-color: #f3f3f3
$phone-footer-bg-color: #fff

$item-colors: (1: #5b37b7, 2: #b73892, 3: #eda600, 4: #1194aa)

// base
html, body
    height: 100%
    font-family: monospace
    margin: 0
    padding: 0

// grid
.container
    width: 100%
    height: 100%
    display: flex
    justify-content: center
    align-items: center

// source
.source
    position: fixed
    right: 2rem
    bottom: 2rem
    a
        color: #fff
        text-decoration: none
        span
            opacity: .32

// phone
.phone
    display: flex
    width: 25em
    height: 25em
    background-color: $phone-bg-color
    border-radius: 32px
    overflow: hidden

// phone footer
.phone-footer
    display: flex
    justify-content: center
    align-items: center
    width: 100%
    height: 6em
    padding-left: 2em
    padding-right: 2em
    background-color: $phone-footer-bg-color
    margin-top: auto

// nav
.nav
    display: flex
    width: 100%
    justify-content: space-between
    &-item
        position: relative
        display: flex
        padding: 8px
        border-radius: 16px
        @each $index, $color in $item-colors
            &:nth-child(#{$index})
                background-color: lighten($color, 46%)
                label
                    background-color: $color
                span
                    color: $color
                    &:before
                        background-color: $color
        *
            cursor: pointer
        label
            position: relative
            display: inline-block
            width: 1em
            height: 1em
            background-color: inherit
            border-radius: 50%
            &:before
                content: ""
                position: absolute
                top: -100%
                left: -100%
                width: 300%
                height: 300%
                background-color: transparent
        span
            font-size: .875em
            margin-left: 0
            max-width: 0
            overflow: hidden
            transition-property: max-width, margin-left
            transition-duration: .32s
            transition-timing-function: ease
            &:before
                content: ""
                opacity: 0
                position: fixed
                z-index: -1
                top: 50%
                margin-top: -100rem
                left: 50%
                margin-left: -100rem
                width: 200rem
                height: 200rem
                transform-origin: center
                transform: scale(.1)
                border-radius: 50%
                transition-property: opacity, transform
                transition-duration: .32s
                transition-timing-function: ease
        input
            position: absolute
            top: 0
            left: 0
            visibility: hidden
            &:checked + span
                max-width: 100vw
                margin-left: 4px
                &:before
                    opacity: 1
                    transform: scale(1)
Смотрим наш результат:
13829
Автор
baltun
Скачиваний
0
Просмотры
681
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ