Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Баннерообмен с SVK Portal (2)
Hibernation Evil - Эпизод... (0)
Народная Солянка 2016 [OG... (0)
У костра (193)
Вступить в группировку (40)
У костра (193)
Анекдоты (145)
Города (94)
Обновление сайта (68)
Создание НПС (63)
StraNNik (1366)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
Zarig (19.11.2020)
alekseitsarapckin (15.11.2020)
kendyukoleg (11.11.2020)
medewo10 (08.11.2020)
0wlrlyk (02.11.2020)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Меню » Вертикальное меню для Action-RPG (Rip by Бармен)

Вертикальное меню для Action-RPG
StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Среда, 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

Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Меню » Вертикальное меню для Action-RPG (Rip by Бармен)
  • Страница 1 из 1
  • 1
Поиск:
Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Поддержка сайта Near Bet | Рекомендуем AdGuard
© 20.11.2013-26.11.2020