Гость
Обновленные темы Популярные темы Активные пользователи
The Sims 4 - версия 1.62.67.1020 (07.04.2020) 0 08.04.2020 в 19:14 от 2024end Тактический полигон [ЧН] 2 04.04.2020 в 10:11 от 2024end Внутренняя оптимизация сайта на ucoz. 1 02.04.2020 в 20:05 от Terrorist Битая ссылка 14 01.04.2020 в 17:58 от 2024end Создание типовых квестов 3 30.03.2020 в 15:13 от 2024end S.T.A.L.K.E.R. - UE4 0 29.03.2020 в 16:19 от Бармен S.T.A.L.K.E.R - Группа Cтрелка 0 22.03.2020 в 16:41 от Бармен Школы для The Sims 4 0 20.03.2020 в 09:36 от 2024end Хроники Кайдана 0 16.03.2020 в 00:17 от Бармен Игра Душ - Новое Начало 0 15.03.2020 в 13:28 от Бармен
2024end 3872

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Горизонтальное меню Warhammer rip Бармен
Горизонтальное меню Warhammer rip Бармен
Администраторы
Кол-во постов: 154
Репутация: 759
Регистрация: 28.07.2018
Статус: Не в сети
 Автор темы | Вторник, 28.05.2019, 20:15 | Сообщение # 1


Рипал: Бармен
Вставляем в верхнею часть сайта:
Код
<ul class="mainnav is-main">
    <li class="" data-subtitle="Our Worlds">
        <a href="#" class="js-load-ajax-content " data-reload="false">Games</a>
    </li>
    <li class="" data-subtitle="About Us">
        <a href="#" class="js-load-ajax-content">Company</a>
    </li>
    <li class="" data-subtitle="Hub">
        <a href="#" class="js-header-community-link js-load-ajax-content" data-reload="true">Community</a>
    </li>
    <li class="" data-subtitle="Plan">
        <a href="#" class="js-load-ajax-content">Roadmap</a>
    </li>
    <li class="" data-subtitle="Collection">
        <a href="#" class="js-load-ajax-content" data-reload="true">Media</a>
    </li>
    <li class="" data-subtitle="Products">
        <a href="#" class="js-load-ajax-content" data-reload="true">Store</a>
    </li>
</ul>

CSS:

Код
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap&subset=cyrillic,cyrillic-ext');
.mainnav.is-main {
     display: none;
}
@media (min-width: 1280px) {
     .mainnav.is-main {
         display: block;
    }
}
.mainnav {
     display: block;
     text-align: center;
     position: static;
     margin: 0;
     padding: 0;
}
.mainnav li {
     display: inline-block;
     list-style: none;
     position: relative;
}
.mainnav li.is-inactive::after {
     display: none !important;
}
.mainnav li.is-inactive::before {
     display: none !important;
}
.mainnav li.is-active a {
     opacity: 1;
}
.mainnav li.is-active::after {
     content: '';
     width: 8px;
     height: 8px;
     border: 1px solid #C39A2A;
     display: inline-block;
     background: transparent;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     position: absolute;
     bottom: -4px;
     left: 50%;
     margin-left: -4px;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     opacity: 1;
}
.mainnav li.is-active::before {
     content: attr(data-subtitle);
     position: absolute;
     bottom: 6px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     font-weight: 400;
     font-size: 12px;
     color: rgba(237, 238, 238, 0.55);
     letter-spacing: 3px;
     white-space: nowrap;
}
.mainnav li.is-active a::before {
     content: '';
     width: -webkit-calc(100% / 2 - 5px);
     width: calc(100% / 2 - 5px);
     height: 1px;
     background: #C39A2A;
     display: block;
     position: absolute;
     bottom: 0;
     left: 0;
}
.mainnav li.is-active a::after {
     content: '';
     width: -webkit-calc(100% / 2 - 5px);
     width: calc(100% / 2 - 5px);
     height: 1px;
     background: #C39A2A;
     display: block;
     position: absolute;
     bottom: 0;
     right: 0;
}
.mainnav li::after {
     content: '';
     width: 8px;
     height: 8px;
     border: 1px solid #C39A2A;
     background: #C39A2A;
     display: inline-block;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     position: absolute;
     bottom: -4px;
     left: 50%;
     margin-left: -4px;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     opacity: 0;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
.mainnav li:hover::after {
     opacity: 1;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
.mainnav li.is-active:hover::after {
     background: #C39A2A;
}
.mainnav a {
     display: inline-block;
     line-height: 50px;
     position: relative;
     padding: 0 25px;
     color: #fff;
     font-size: 14px;
     text-transform: uppercase;
     font-weight: 600;
     opacity: 0.55;
     text-decoration: none;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     font-family: 'Roboto', sans-serif;
     letter-spacing: 1px;
}
@media (min-width: 770px) {
     .mainnav a {
         line-height: 70px;
         font-size: 18px;
    }
}
.mainnav a:hover {
     opacity: 1;
}
.mainnav a.is-inactive {
     line-height: 26px;
     opacity: 0.3;
     cursor: default;
}
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Горизонтальное меню Warhammer rip Бармен
  • Страница 1 из 1
  • 1
Поиск: