|
|
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
|
|
Слышу гимн зашитых ртов |
|
|
|
|
|
Дата: Среда, 25.12.2019, 15:55/ Сообщение №: 1
|
|
Рипал: Бармен
Ссылка на скачивание!
Вставляем в верхнею часть сайта:
Код
<section class="navigation-section">
<div class="navigation js-header-navigation">
<a href="#" class="navigation__logo"><img src="/static/images/common/header-logo.png" srcset="/static/images/common/header-logo.png 1x, /static/images/common/header-logo@2x.png 2x"></a>
<button class="navigation__hamburger js-header-menu-open"></button>
<nav class="navigation__menu">
<div class="navigation__menu-list">
<div class="navigation__menu-item"><a href="#" class="navigation__menu-link js-header-menu-item ">
Игра
<i class="icon icon-arrow"></i></a>
<ul class="navigation__menu-dropdown">
<li><a href="#" class="navigation__menu-dropdown-link">Об игре</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Скачать</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Классы</a></li>
<li><a href="#" target="_blank" class="navigation__menu-dropdown-link">Энциклопедия</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">FAQ</a></li>
</ul>
</div>
<div class="navigation__menu-dot"></div>
<div class="navigation__menu-item"><a href="#" class="navigation__menu-link js-header-menu-item ">
Новости
<i class="icon icon-arrow"></i></a>
<ul class="navigation__menu-dropdown">
<li><a href="#" class="navigation__menu-dropdown-link">Все новости</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Важное</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Конкурсы</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Акции</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Обзоры</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Другое</a></li>
</ul>
</div>
<div class="navigation__menu-dot"></div>
<div class="navigation__menu-item"><a href="#" target="_blank" class="navigation__menu-link js-header-menu-item">
Сообщества
<i class="icon icon-arrow"></i></a>
<ul class="navigation__menu-dropdown">
<li><a href="#" target="_blank" class="navigation__menu-dropdown-link">ВКонтакте</a></li>
<li><a href="#" target="_blank" class="navigation__menu-dropdown-link">YouTube</a></li>
<li><a href="#" target="_blank" class="navigation__menu-dropdown-link">Discord</a></li>
<li><a href="#" target="_blank" class="navigation__menu-dropdown-link">Instagram</a></li>
<li><a href="#" target="_blank" class="navigation__menu-dropdown-link">Одноклассники</a></li>
<li><a href="/forums/" target="_blank" class="navigation__menu-dropdown-link">Форум</a></li>
</ul>
</div>
<div class="navigation__menu-dot"></div>
<div class="navigation__menu-item"><a href="#" class="navigation__menu-link js-header-menu-item ">
Магазин
<i class="icon icon-arrow"></i></a>
<ul class="navigation__menu-dropdown">
<li><a href="#" class="navigation__menu-dropdown-link">Купить кристаллы</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Премиум</a></li>
<li><a href="#" class="navigation__menu-dropdown-link">Купить наборы</a></li>
</ul>
</div>
<div class="navigation__menu-dot"></div>
<div class="navigation__menu-item"><a href="#" class="navigation__menu-link js-header-menu-item ">
Aкции
<i class="icon icon-arrow"></i></a>
<ul class="navigation__menu-dropdown">
<li><a href="#" class="navigation__menu-dropdown-link">Приведи друга</a></li>
</ul>
</div>
</div>
</nav>
<div class="navigation__button">
<button class="button button--base button--small"><span>Скачать игру</span></button>
</div>
</div>
</section>
CSS:
Код
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap&subset=cyrillic,cyrillic-ext');
.navigation-section {
position: fixed;
z-index: 10;
width: 100%;
left: 0;
top: 0;
}
.navigation {
position: relative;
width: 100%;
height: 65px;
margin: auto;
}
.navigation__logo {
left: 0;
padding-left: 40px;
}
.navigation__button, .navigation__logo {
display: flex;
align-items: center;
height: 100%;
width: 160px;
box-sizing: content-box;
position: absolute;
top: 0;
z-index: 11;
}
.navigation__logo img {
width: 100%;
height: auto;
}
.navigation__hamburger {
display: none;
}
button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 0;
-webkit-appearance: none;
border: none;
}
.navigation__menu {
background-color: rgba(0,0,0,.8);
color: #fff;
font-size: 14px;
font-family: 'Comfortaa', cursive;
line-height: 24px;
font-weight: 700;
font-size: 11px;
letter-spacing: .08em;
display: flex;
justify-content: center;
width: 100%;
max-height: 65px;
transition: all .35s ease-out;
overflow: hidden;
}
.navigation__menu-list {
display: flex;
width: 100%;
justify-content: space-between;
max-width: 785px;
margin: 0 220px;
padding: 0;
}
.navigation__menu-item {
position: relative;
margin: 0;
}
.navigation__menu-link {
white-space: nowrap;
text-decoration: none;
display: flex;
align-items: center;
color: #fff;
text-transform: uppercase;
transition: border-color .35s ease-out;
border-bottom: 2px solid transparent;
margin: 19px 0;
}
.navigation__menu-item .icon {
display: none;
}
.navigation__menu-dropdown {
margin: 0;
padding: 5px 0 30px;
width: 10px;
opacity: 0;
transition: opacity .35s ease-out .35s;
}
.navigation__menu-dropdown-link {
text-decoration: none;
text-transform: uppercase;
color: #fff;
background: none;
max-width: 100%;
cursor: pointer;
display: block;
white-space: nowrap;
padding: 0 0 5px;
transition: color .35s ease-out;
}
.navigation__menu-dropdown-link:hover{
color:#c00
}
.navigation__menu-link.active, .navigation__menu-link:hover {
border-color: #c00;
}
li, ul {
list-style-type: none;
}
.navigation__menu:hover{
max-height:700px;
background-color:#000;
transition:all 1.35s ease-out
}
.navigation__menu:hover .navigation__menu-dropdown{
opacity:1
}
@media (max-width:1024px){
.navigation__menu{
font-size:10px
}
}
.navigation__menu-dot {
width: 6px;
height: 6px;
margin-top: 28px;
border: 1px solid hsla(0,0%,100%,.4);
transform: rotate(45deg);
}
.navigation__button {
right: 0;
padding-right: 40px;
width: 180px;
}
.navigation__button .button {
width: 100%;
}
.button:not(.button--disabled) {
cursor: pointer;
}
.button {
background: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
font-size: 11px;
font-family: 'Comfortaa', cursive;
line-height: 24px;
line-height: 1;
color: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
min-width: 260px;
height: 40px;
white-space: nowrap;
outline: none;
}
.button--small {
height: 24px;
min-width: auto;
font-size: 11px;
font-family: 'Comfortaa', cursive;
line-height: 14px;
}
.button span {
display: block;
height: 38px;
line-height: 34px;
width: calc(100% - 80px);
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
position: relative;
z-index: 2;
margin: 0 -15px;
}
.button--base:hover span{
background:transparent;
border-top-color:#c00;
border-bottom-color:#c00
}
.button--base:hover:after,.button--base:hover:before{
background:url(/images/button-decor-inverse.svg?0034e16ff0dc794e614930ef44472f51) 50% no-repeat
}
.button--inversed span{
background:transparent;
border-top-color:#c00;
border-bottom-color:#c00
}
.button--inversed:after,.button--inversed:before{
background:url(/images/button-decor-inverse.svg?0034e16ff0dc794e614930ef44472f51) 50% no-repeat
}
.button--inversed:hover span{
background:#c00;
border-top-color:transparent;
border-bottom-color:transparent
}
.button--inversed:hover:after,.button--inversed:hover:before{
background:url(/images/button-decor-base.svg?8d8e50eae78e122e4bd466983923c74e) 50% no-repeat
}
.button--disabled span{
background:#888
}
.button--base span {
background: #c00;
}
.button--small span {
height: 22px;
border-top-width: 1px;
border-bottom-width: 1px;
line-height: 20px;
letter-spacing: 1px;
width: calc(100% - 48px);
margin: 0 -10px;
}
.button:after, .button:before {
content: "";
display: block;
width: 40px;
height: 40px;
}
.button:after {
transform: rotate(180deg);
}
.button--base:after, .button--base:before {
background: url(/images/button-decor-base.svg?8d8e50eae78e122e4bd466983923c74e) 50% no-repeat;
}
.button--small:after, .button--small:before {
width: 24px;
height: 24px;
}
.button--inversed span{
background:transparent;
border-top-color:#c00;
border-bottom-color:#c00
}
*, :after, :before {
box-sizing: border-box;
}
Тихо на улице, пусто в квартире..Спасибо реактору №4
|
|
|
|
|
|
|