Анимированная навигация rip Бармен - Форум
Воскресенье
19.09.2021
09:02
 
X-Files
 
Онлайн радио #radiobells_script_hash
Мини-чат ·

Для добавления сообщения зарегистрируйтесь.
Регистрация Вход . Новые сообщения · Участники · Правила форума · RSS

  • Страница 1 из 1
  • 1
Форум »  SOFT, Windows, Android » Веб » Анимированная навигация rip Бармен
Анимированная навигация rip Бармен
БарменДата: Воскресенье, 25.07.2021, 23:33 | Сообщение # 1
Группа: Альянс
Сообщений: 43
Статус:


Рипал: Бармен
Ссылка на скачивание!
Вставляем в верхнею или нижнею часть сайта:

Код
<div class="header__nav">
  <a class="header__nav-link header__nav-link--youtube" href="#" target="_blank">
    <span class="header__nav-link-bg header__nav-link-bg--left"></span>
    <span class="header__nav-link-bg header__nav-link-bg--right"></span>
    <span class="header__nav-link-bg header__nav-link-bg--icon">
                        <span></span>
    </span>
    <span class="skip">YouTube</span>
  </a>
  <a class="header__nav-link header__nav-link--facebook" href="#" target="_blank">
    <span class="header__nav-link-bg header__nav-link-bg--left"></span>
    <span class="header__nav-link-bg header__nav-link-bg--right"></span>
    <span class="header__nav-link-bg header__nav-link-bg--icon">
                        <span></span>
    </span>
    <span class="skip">Facebook</span>
  </a>
  <a class="header__nav-link header__nav-link--copy" href="#" data-clipboard-text="#">
    <span class="header__nav-link-bg header__nav-link-bg--left"></span>
    <span class="header__nav-link-bg header__nav-link-bg--right"></span>
    <span class="header__nav-link-bg header__nav-link-bg--icon">
                        <span></span>
    </span>
    <span class="skip">Копировать URL</span>
  </a>
</div>
CSS:

Код
.header__nav {
    position: absolute;
    right: 40px;
    top: 0;
    width: 284px;
    padding-top: 25px;
    text-align: right;
}

.header__nav .header__nav-link {
    display: inline-block;
    position: relative;
    width: 61px;
    height: 61px;
    margin-left: 10px;
    background: url(/pc/images/bg-header-nav.png) 0 0 no-repeat;
}

.header__nav .header__nav-link--youtube {
    margin-left: 0;
}

.header__nav .header__nav-link:hover .header__nav-link-bg--left,
.header__nav .header__nav-link:hover .header__nav-link-bg--right {
    height: 100%
}

#header .header__nav .header__nav-link:hover .header__nav-link-bg--icon span {
    opacity: 1
}

.header__nav .header__nav-link .header__nav-link-bg {
    position: absolute;
}

.header__nav .header__nav-link .header__nav-link-bg--left {
    left: 0;
    top: 0;
    width: 31px;
    height: 0;
    transition: height .3s;
    background: url(/pc/images/bg-header-nav-on.png) 0 0 no-repeat;
}

.header__nav .header__nav-link .header__nav-link-bg--right {
    right: 0;
    bottom: 0;
    width: 30px;
    height: 0;
    transition: height .3s;
    background: url(/pc/images/bg-header-nav-on.png) 100% 100% no-repeat;
}

.header__nav .header__nav-link--youtube .header__nav-link-bg--icon,
.header__nav .header__nav-link--youtube .header__nav-link-bg--icon span {
    background-position-x: left;
}

.header__nav .header__nav-link .header__nav-link-bg--icon {
    position: absolute;
    left: 18px;
    top: 19px;
    width: 25px;
    height: 23px;
    background: url(/pc/images/icon-header-nav.png) no-repeat;
    background-position-y: top;
}

.header__nav .header__nav-link .header__nav-link-bg--icon span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s;
    background: url(/pc/images/icon-header-nav.png) no-repeat;
    background-position-y: bottom;
}

.header__nav .header__nav-link--youtube .header__nav-link-bg--icon,
.header__nav .header__nav-link--youtube .header__nav-link-bg--icon span {
    background-position-x: left;
}

.header__nav .header__nav-link--facebook .header__nav-link-bg--icon,
.header__nav .header__nav-link--facebook .header__nav-link-bg--icon span {
    background-position-x: -30px;
}

.header__nav .header__nav-link--copy .header__nav-link-bg--icon,
.header__nav .header__nav-link--copy .header__nav-link-bg--icon span {
    background-position-x: right;
}

.skip,caption {
    overflow: hidden;
}

.skip {
    display: block;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}
 
Форум »  SOFT, Windows, Android » Веб » Анимированная навигация rip Бармен
  • Страница 1 из 1
  • 1
Поиск:


СЕЗОН КАТАСТРОФ © 2021