Угловое горизонтальное меню rip Бармен - Форум
Воскресенье
19.09.2021
08:27
 
X-Files
 
Онлайн радио #radiobells_script_hash
Мини-чат ·

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

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


Рипал: Бармен

Ссылка на скачивание!

Вставляем в верхнею часть сайта:

Код
<div data-v-04934dce="" class="menu-shadow menu-shadow--left"></div>
<div data-v-04934dce="" class="menu-wrap">
   <ul data-v-04934dce="" class="menu">
      <li data-v-04934dce="" class="menu__item"><a data-v-04934dce="" href="#" aria-current="page" class="menu__link router-link-exact-active router-link-active">Home</a></li>
      <li data-v-04934dce="" class="menu__item"><a data-v-04934dce="" href="#" class="menu__link">News</a></li>
      <li data-v-04934dce="" class="menu__item"><a data-v-04934dce="" href="#" target="_blank" class="menu__link">Forum</a></li>
      <li data-v-04934dce="" class="menu__item"><a data-v-04934dce="" href="#" target="_blank" class="menu__link">Press</a></li>
   </ul>
</div>
CSS:

Код
.menu-shadow[data-v-04934dce] {
    position: absolute;
    top: 0;
    background-size: contain;
    z-index: -1;
    pointer-events: none;
}
.menu-shadow--left[data-v-04934dce] {
    left: 0;
    width: 305px;
    height: 215px;
    background-position: 0 0;
    background-image: url(/png/menu-shadow-left-mobile.png);
}
.menu-shadow--left[data-v-04934dce] {
    width: 520px;
    height: 145px;
    background-image: url(/png/menu-shadow-left.png);
    background-position: 100% 0;
    background-size: cover;
}
.menu__item[data-v-04934dce] {
    align-items: center;
}
.menu[data-v-04934dce] {
    display: flex;
    margin: 0 0 0 25px;
    padding: 0;
}
.menu__item[data-v-04934dce] {
    margin-right: 1.04167vw;
    display: inline-flex;
}
.menu__item[data-v-04934dce]:before {
    content: "";
    display: block;
    width: 6px;
    height: 5px;
    background-image: url(/svg/menu-bullet.svg);
    background-size: contain;
    margin-right: 6px;
}
.menu__item[data-v-04934dce]:hover:before {
    background-image: url(/svg/menu-bullet-active.svg);
}
.menu__link[data-v-04934dce] {
    position: relative;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fbcea0;
}
a,
a[href^=mailto]:hover {
    text-decoration: none;
}
.menu__link[data-v-04934dce]:before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .3s ease, transform .3s ease;
}
.menu__item:hover .menu__link[data-v-04934dce] {
    color: #fff;
}
.menu__item:hover .menu__link[data-v-04934dce]:before {
    opacity: 1;
    transform: translateY(0);
}
 
Форум »  SOFT, Windows, Android » Веб » Угловое горизонтальное меню rip Бармен
  • Страница 1 из 1
  • 1
Поиск:


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