Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
True Stalker (0)
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
У костра (193)
Анекдоты (145)
Города (94)
Обновления сайта (77)
Свалка (68)
StraNNik (1417)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
p4ladya (05.02.2024)
alexander24tomilin (20.12.2023)
Lesnik (13.12.2023)
nikbal888 (05.12.2023)
Fugaz56 (09.08.2023)
  • Страница 1 из 1
  • 1
Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Меню » Вертикальное меню для Action-RPG (Rip by Бармен)
Вертикальное меню для Action-RPG
Слышу гимн зашитых ртов
StraNNik
Группа: Администратор
Ранг: Опытный
Сообщений: 1417
Карма: 33
Сообщение # 1
Дата: 25.12.2019 в 15:55


Рипал: Бармен

Ссылка на скачивание!
Вставляем в верхнею часть сайта:

Код
<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;
}

Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Меню » Вертикальное меню для Action-RPG (Rip by Бармен)
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Microsoft Edge
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-13.04.2024