Гость
Обновленые темы Популярные темы Активные пользователи
uWnd окна в стиле QIP by TRANE73 для uCoz 0 25.01.2020 в 12:38 от Admin Плавно падающий фоновый снег на чистом CSS3 0 25.01.2020 в 12:36 от Admin Анимированная кнопка «Скачать» на CSS3 и SVG 0 25.01.2020 в 12:32 от Admin BB-CODE для Мини-чата! rip Бармен 1 20.01.2020 в 23:57 от Бармен X-Ray Multiplayer Extension 3 19.01.2020 в 12:37 от Бармен Битая ссылка 8 19.01.2020 в 11:03 от Admin «Thorny Way» - Тернистый путь 1 18.01.2020 в 20:13 от Бармен История Кота (Cat Story) 1 18.01.2020 в 20:07 от Бармен The Land of the Emerald Dawn 0 17.01.2020 в 14:54 от Admin Поле со списком 2 16.01.2020 в 22:22 от Admin
Admin 3819

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Вертикальное меню для Action-RPG rip Бармен
Вертикальное меню для Action-RPG rip Бармен
Бармен (Не в сети)
Администраторы
Сообщений: 143
 Автор темы | Среда, 25.12.2019, 11: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;
}
StraNNik (Не в сети)
Проверенные
Сообщений: 32
 Среда, 25.12.2019, 15:56 | Сообщение # 2
Красивая менюшка, как и сам проект Lost Ark, ожидаю данную игрушку. :)
Бармен (Не в сети)
Администраторы
Сообщений: 143
 Автор темы | Среда, 25.12.2019, 15:59 | Сообщение # 3
StraNNik, А что её ожидать? Она и так доступна уже, что в России что в Кореи :)
StraNNik (Не в сети)
Проверенные
Сообщений: 32
 Среда, 25.12.2019, 16:12 | Сообщение # 4
Цитата Бармен ()
StraNNik, А что её ожидать? Она и так доступна уже, что в России что в Кореи

ух ты ж.... Видимо я за 2 месяца действительно многое упустил. Пойду скачивать. :D
Бармен (Не в сети)
Администраторы
Сообщений: 143
 Автор темы | Среда, 25.12.2019, 17:03 | Сообщение # 5
Цитата StraNNik ()
ух ты ж.... Видимо я за 2 месяца действительно многое упустил. Пойду скачивать.

Качай обязательно качай :) я тоже в данное творение играю. А тебе предстоит пройти классную сюжетку, а после ты найдешь чем заняться там обязательно найдешь ;)
StraNNik (Не в сети)
Проверенные
Сообщений: 32
 Среда, 25.12.2019, 17:11 | Сообщение # 6
Цитата Бармен ()
Качай обязательно качай я тоже в данное творение играю. А тебе предстоит пройти классную сюжетку, а после ты найдешь чем заняться там обязательно найдешь

Таки уже скачал. Чё она всего 36гб весит, щас пару каток в дотку и зайду гляну чё там :)
Бармен (Не в сети)
Администраторы
Сообщений: 143
 Автор темы | Среда, 25.12.2019, 17:16 | Сообщение # 7
Цитата StraNNik ()
Чё она всего 36гб весит

Ну ты конечно сказанул :D

Цитата StraNNik ()
щас пару каток в дотку

Dota да ну тебя, как у тебя еще нервны в порядке от этой игры.
StraNNik (Не в сети)
Проверенные
Сообщений: 32
 Среда, 25.12.2019, 17:50 | Сообщение # 8
Цитата Бармен ()
Ну ты конечно сказанул

ну тык у меня быстрый интернет, минут 15 скачивал.
Цитата Бармен ()
Dota да ну тебя, как у тебя еще нервны в порядке от этой игры.

так я не психую. выиграл - хорошо. проиграл - хрен бы с ним.
Там конченных много, но есть кнопка "мут". :)
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Вертикальное меню для Action-RPG rip Бармен
  • Страница 1 из 1
  • 1
Поиск: