Гость
Обновленые темы Популярные темы Активные пользователи
Second Breath of Clear Sky [ver.0.2] 0 28.11.2019 в 17:38 от Бармен S.T.A.L.K.E.R Escape From Zone 0 23.11.2019 в 12:45 от Admin Иконки групп для synthira 17 21.11.2019 в 11:35 от Schmerz OpenXRay 1 10.11.2019 в 08:25 от Admin Усовершенствование "тем", "ответов"... 0 05.11.2019 в 22:49 от Admin Активность в Ваших темах для uCoz 0 05.11.2019 в 22:44 от Admin Дополнительный смайлы для форума uCoz 0 05.11.2019 в 22:40 от Admin Край изумрудной зари 2 02.11.2019 в 16:09 от Admin Арты: Сталкер, апокалипсис, зона, конец света и прочее 54 29.10.2019 в 18:01 от Admin Плееры фильмов для киносайтов 0 28.10.2019 в 18:13 от Admin
Admin 3798

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Горизонтальное меню Warhammer rip Бармен
Горизонтальное меню Warhammer rip Бармен
Бармен (В сети)
Администраторы
Сообщений: 128
 Автор темы | Вторник, 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
Поиск: