Тёмное горизонтальное меню rip Бармен - Форум
Воскресенье
09.05.2021
20:35
 
X-Files
 
Онлайн радио #radiobells_script_hash
Мини-чат ·

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

  • Страница 1 из 1
  • 1
Форум »  SOFT, Windows, Android » Веб » Тёмное горизонтальное меню rip Бармен
Тёмное горизонтальное меню rip Бармен
БарменДата: Понедельник, 29.03.2021, 19:18 | Сообщение # 1
Группа: Альянс
Сообщений: 28
Статус:


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

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

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

Код
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC&display=swap" rel="stylesheet">
<ul class="tabs">
   <li>
      <a href="#" class="tab">
      <span>Персонажи</span>
      </a>
   </li>
   <li>
      <a href="#" class="tab">
      <span>оружие</span>
      </a>
   </li>
   <li>
      <a href="#" class="tab active d_active">
      <span>мир</span>
      </a>
   </li>
   <li>
      <a href="#" class="tab">
      <span>существа</span>
      </a>
   </li>
   <li>
      <a href="#" class="tab">
      <span>локации</span>
      </a>
   </li>
</ul>
CSS:

Код
.tabs {
    position: relative;
    margin: 0;
    list-style: none;
    height: 68px;
    width: 100%;
    font-family: 'Alegreya Sans SC', sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 13px 0;
    z-index: 11;
    max-width: 100%;
    overflow: hidden;
}

.tabs {
    overflow: hidden;
}

.tabs:before {
    content: "";
    position: absolute;
    left: 0;
    top: -110px;
    background: url('/wp-content/themes/img/menu-l.svg') 0 0 no-repeat;
    width: 329px;
    height: 216px;
    z-index: 0;
}

.tabs:after {
    content: "";
    position: absolute;
    right: 0;
    top: -110px;
    background: url('/wp-content/themes/img/menu-r.svg') 0 0 no-repeat;
    width: 162px;
    height: 128px;
    z-index: 10;
}

.tabs li {
    position: relative;
    z-index: 2;
}

.tabs li:first-child .tab {
    width: 220px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    margin-left: -15px;
}

.tabs li:last-child .tab {
    width: 190px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.tabs li .tab,
.tabs li .tab-dis {
    cursor: pointer;
    padding: 6px 45px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    -webkit-transform: skewX(-38deg);
    -ms-transform: skewX(-38deg);
    transform: skewX(-38deg);
    border-radius: 3px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    display: inline-block;
    margin: 0 20px;
}

.tabs li:nth-child(3) .tab-dis {
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.tabs li:nth-child(3) .tab-dis svg {
    margin-right: 10px;
}

.tabs li:nth-child(3) .tab-dis span,
#tab3-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabs li .tab span,
.tabs li .tab-dis span {
    -webkit-transform: skewX(38deg);
    -ms-transform: skewX(38deg);
    transform: skewX(38deg);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    line-height: 29px;
    display: inline-block;
}

.tabs li:before {
    content: "";
    width: 167px;
    height: 68px;
    background: url(/wp-content/themes/img/menu-line.svg) 0 0 no-repeat;
    position: absolute;
    right: -78px;
    top: -13px;
}

.tabs li:first-child {
    width: 220px;
}

.tabs li:first-child:before {
    content: "";
    width: 501px;
    height: 68px;
    background: url(/wp-content/themes/img/menu-left-line.svg) 0 0 no-repeat;
    position: absolute;
    right: -82px;
    top: -13px;
}

.tabs li:first-child:after {
    content: "";
    width: 1000px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    right: 419px;
    top: 21px;
}

.tabs li:last-child {
    width: 190px;
    z-index: 1;
}

.tabs li:last-child:before {
    content: "";
    width: 473px;
    height: 68px;
    background: url(/wp-content/themes/img/menu-right-line.svg) 0 0 no-repeat;
    position: absolute;
    left: -81px;
    top: -13px;
}

.tabs li:last-child:after {
    content: '';
    width: 1000px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    opacity: 10%;
    top: 0;
    bottom: -3px;
    margin: auto;
    right: -1200px;
}

.tabs li:nth-last-child(2):before {
    display: none;
}

.tabs .tab:hover {
    background-color: rgba(242, 47, 32, 0.7);
}

.tabs .tab.active {
    background-color: rgba(242, 47, 32, 0.7);
    display: block;
}
 
Форум »  SOFT, Windows, Android » Веб » Тёмное горизонтальное меню rip Бармен
  • Страница 1 из 1
  • 1
Поиск:


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