Ну дак она в общем доступе уже везде
Так я и не говорил что покупал. Просто долго искал без багов, полностью рабочую.
.emudevs__nav.p-nav-scroller {
position: relative;
border-radius: 12px;
backdrop-filter: blur(10px);
background: rgba(23, 24, 31, 0.7);
box-shadow:
0 0 0 1px rgba(38, 187, 116, 0.2),
0 0 0 2px rgba(38, 187, 116, 0.1),
0 0 15px rgba(38, 187, 116, 0.25),
0 0 30px rgba(38, 187, 116, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.menu--structural {
box-shadow:
0 15px 50px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(38, 187, 116, 0.15),
0 0 30px rgba(38, 187, 116, 0.2);
}
.emudevs__zoomin-hover {
display: flex;
align-items: center;
padding: 10px 12px;
background: rgba(37, 39, 50, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
gap: 12px;
}
.emudevs__zoomin-hover::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent,
rgba(38, 187, 116, 0.1),
transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.emudevs__zoomin-hover:hover {
background: rgba(38, 187, 116, 0.2);
border: 1px solid rgba(38, 187, 116, 0.5);
transform: translateX(4px) translateY(-1px);
box-shadow:
0 0 20px rgba(38, 187, 116, 0.3),
0 4px 8px rgba(0, 0, 0, 0.2);
}
.emudevs__zoomin-hover:hover::before {
transform: translateX(100%);
}
.menu--structural .emudevs__flex.emudevs__align-center.emudevs__justify-center {
width: 32px;
height: 32px;
background: rgba(38, 187, 116, 0.15) !important;
border: 1px solid rgba(38, 187, 116, 0.3);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow:
0 0 10px rgba(38, 187, 116, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.menu--structural .emudevs__zoomin-hover:hover .emudevs__flex.emudevs__align-center.emudevs__justify-center {
background: rgba(38, 187, 116, 0.3) !important;
border-color: rgba(38, 187, 116, 0.6);
box-shadow:
0 0 15px rgba(38, 187, 116, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}А не поделитесь архивом бекапа стабильной версии pro шаблона ?
возьми его.
<style>
/* ============================================
-------------KINGZ SIDE MENU-----------------
============================================ */
.kingz-side-menu-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Кнопка открытия меню */
.kingz-side-menu-toggle {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 10001;
background: linear-gradient(135deg, #26bb74, #1e9d63);
border: none;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 20px rgba(38, 187, 116, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kingz-side-menu-toggle:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(38, 187, 116, 0.6);
}
.kingz-side-menu-toggle span {
display: block;
width: 24px;
height: 2px;
background: white;
margin: 3px 0;
transition: all 0.3s ease;
border-radius: 1px;
}
.kingz-side-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.kingz-side-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.kingz-side-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Раздвижное меню */
.kingz-off-canvas-menu {
position: fixed;
top: 0;
left: -400px;
width: 350px;
height: 100%;
background: linear-gradient(180deg, #17181f 0%, #0f1015 100%);
z-index: 10000;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5);
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.kingz-off-canvas-menu.active {
left: 0;
}
/* Затемнение фона */
.kingz-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.kingz-menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* Заголовок меню */
.kingz-menu-header {
padding: 25px 25px 20px;
border-bottom: 1px solid rgba(40, 42, 54, 0.5);
background: rgba(23, 24, 31, 0.95);
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.kingz-menu-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #26bb74, transparent);
}
.kingz-menu-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.kingz-menu-logo-icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, #26bb74, #1e9d63);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(38, 187, 116, 0.3);
}
.kingz-menu-logo-icon svg {
width: 24px;
height: 24px;
fill: white;
}
.kingz-menu-logo-text {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, #26bb74, #4cd195);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.kingz-menu-subtitle {
font-size: 0.9rem;
color: #8a8f98;
margin-left: 59px;
}
/* Контейнер навигации */
.kingz-navigation-container {
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}
/* Навигация */
.kingz-p-nav-list {
list-style: none;
padding: 20px 0;
}
.kingz-p-nav-list__item {
position: relative;
margin: 2px 15px;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.kingz-p-nav-list__item:hover {
background: rgba(40, 42, 54, 0.3);
}
.kingz-p-nav-list__item.has-submenu.active {
background: rgba(40, 42, 54, 0.4);
}
.kingz-p-navEl {
display: flex;
align-items: center;
padding: 14px 20px;
text-decoration: none;
color: #f8f8f2;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
user-select: none;
}
.kingz-p-navEl.is-selected {
background: rgba(38, 187, 116, 0.1);
border-left: 4px solid #26bb74;
}
.kingz-p-navEl:hover {
background: rgba(40, 42, 54, 0.5);
color: white;
}
/* Иконки навигации */
.kingz-nav-icon {
width: 20px;
height: 20px;
margin-right: 15px;
opacity: 0.8;
transition: all 0.3s ease;
flex-shrink: 0;
}
.kingz-p-navEl:hover .kingz-nav-icon {
opacity: 1;
transform: scale(1.1);
}
/* Иконка стрелки для подменю */
.kingz-submenu-arrow {
margin-left: auto;
transition: transform 0.3s ease;
opacity: 0.6;
width: 16px;
height: 16px;
}
.kingz-p-nav-list__item.active .kingz-submenu-arrow {
transform: rotate(180deg);
opacity: 1;
}
/* Подменю */
.kingz-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(15, 16, 21, 0.5);
border-radius: 0 0 12px 12px;
margin-top: -10px;
}
.kingz-p-nav-list__item.active .kingz-submenu {
max-height: 500px;
}
.kingz-submenu__item {
position: relative;
}
.kingz-submenu__link {
display: block;
padding: 12px 20px 12px 55px;
text-decoration: none;
color: #b8b9c5;
transition: all 0.3s ease;
font-size: 0.9rem;
position: relative;
}
.kingz-submenu__link:hover {
color: white;
background: rgba(38, 187, 116, 0.1);
padding-left: 60px;
}
.kingz-submenu__link::before {
content: '';
position: absolute;
left: 40px;
top: 50%;
width: 5px;
height: 5px;
background: #26bb74;
border-radius: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.kingz-submenu__link:hover::before {
opacity: 1;
}
/* Акцентная полоса при ховере */
.kingz-p-nav-list__item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #26bb74;
opacity: 0;
transition: opacity 0.3s ease;
}
.kingz-p-nav-list__item:hover::before {
opacity: 1;
}
/* Футер меню (скрыт) */
.kingz-menu-footer {
display: none;
}
/* Адаптивность */
@media (max-width: 768px) {
.kingz-off-canvas-menu {
width: 300px;
left: -300px;
}
.kingz-side-menu-toggle {
width: 50px;
height: 50px;
bottom: 25px;
left: 15px;
}
.kingz-submenu__link {
padding-left: 50px;
}
.kingz-submenu__link:hover {
padding-left: 55px;
}
}
@media (max-width: 576px) {
.kingz-off-canvas-menu {
width: 280px;
left: -280px;
}
.kingz-side-menu-toggle {
width: 48px;
height: 48px;
bottom: 20px;
left: 12px;
}
}
/* Скроллбар */
.kingz-off-canvas-menu::-webkit-scrollbar,
.kingz-navigation-container::-webkit-scrollbar {
width: 6px;
}
.kingz-off-canvas-menu::-webkit-scrollbar-track,
.kingz-navigation-container::-webkit-scrollbar-track {
background: rgba(40, 42, 54, 0.3);
}
.kingz-off-canvas-menu::-webkit-scrollbar-thumb,
.kingz-navigation-container::-webkit-scrollbar-thumb {
background: #26bb74;
border-radius: 3px;
}
.kingz-off-canvas-menu::-webkit-scrollbar-thumb:hover,
.kingz-navigation-container::-webkit-scrollbar-thumb:hover {
background: #1e9d63;
}
/* Анимация при открытии */
@keyframes kingzMenuSlideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.kingz-p-nav-list__item {
animation: kingzMenuSlideIn 0.4s ease forwards;
opacity: 0;
}
.kingz-p-nav-list__item:nth-child(1) { animation-delay: 0.1s; }
.kingz-p-nav-list__item:nth-child(2) { animation-delay: 0.15s; }
.kingz-p-nav-list__item:nth-child(3) { animation-delay: 0.2s; }
.kingz-p-nav-list__item:nth-child(4) { animation-delay: 0.25s; }
.kingz-p-nav-list__item:nth-child(5) { animation-delay: 0.3s; }
.kingz-p-nav-list__item:nth-child(6) { animation-delay: 0.35s; }
.kingz-p-nav-list__item:nth-child(7) { animation-delay: 0.4s; }
.kingz-p-nav-list__item:nth-child(8) { animation-delay: 0.45s; }
</style>
<div class="kingz-side-menu-container">
<!-- Кнопка открытия меню -->
<button class="kingz-side-menu-toggle" id="kingzMenuToggle">
<span></span>
<span></span>
<span></span>
</button>
<!-- Раздвижное меню -->
<nav class="kingz-off-canvas-menu" id="kingzOffCanvasMenu">
<div class="kingz-menu-header">
<div class="kingz-menu-logo">
<div class="kingz-menu-logo-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<div class="kingz-menu-logo-text">{{ $xf.options.boardTitle }}</div>
</div>
<div class="kingz-menu-subtitle">Premium Community</div>
</div>
<!-- Контейнер навигации -->
<div class="kingz-navigation-container">
<!-- Навигация -->
<ul class="kingz-p-nav-list">
<li class="kingz-p-nav-list__item has-submenu">
<div class="kingz-p-navEl">
<svg class="kingz-nav-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M4 13h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1zm-1 7a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4zm10 0a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v7zm1-10h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1z"/>
</svg>
Форумы
<svg class="kingz-submenu-arrow" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</div>
<div class="kingz-submenu">
<a href="{{ link('forums') }}" class="kingz-submenu__link">Все форумы</a>
<a href="{{ link('forums/-/latest') }}" class="kingz-submenu__link">Новые темы</a>
<a href="{{ link('watched/threads') }}" class="kingz-submenu__link">Отслеживаемые</a>
<a href="{{ link('forums/-/mark-read') }}" class="kingz-submenu__link">Отметить как прочитанное</a>
</div>
</li>
<li class="kingz-p-nav-list__item has-submenu">
<div class="kingz-p-navEl">
<svg class="kingz-nav-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
Upgrade
<svg class="kingz-submenu-arrow" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</div>
<div class="kingz-submenu">
<a href="{{ link('upgrades') }}" class="kingz-submenu__link">Тарифы</a>
<a href="{{ link('account/upgrades') }}" class="kingz-submenu__link">Мои подписки</a>
<a href="{{ link('help/premium-features') }}" class="kingz-submenu__link">Премиум возможности</a>
</div>
</li>
<li class="kingz-p-nav-list__item has-submenu">
<div class="kingz-p-navEl">
<svg class="kingz-nav-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
</svg>
Награды
<svg class="kingz-submenu-arrow" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</div>
<div class="kingz-submenu">
<a href="{{ link('awards/list') }}" class="kingz-submenu__link">Все награды</a>
<a href="{{ link('awards/leaderboard') }}" class="kingz-submenu__link">Таблица лидеров</a>
<xf:if is="$xf.visitor.user_id">
<a href="{{ link('awards/users', $xf.visitor) }}" class="kingz-submenu__link">Мои награды</a>
</xf:if>
</div>
</li>
<li class="kingz-p-nav-list__item has-submenu">
<div class="kingz-p-navEl">
<svg class="kingz-nav-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-1.99.9-1.99 2L3 20c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm0 10c-2.76 0-5-2.24-5-5h2c0 1.66 1.34 3 3 3s3-1.34 3-3h2c0 2.76-2.24 5-5 5z"/>
</svg>
Магазин
<svg class="kingz-submenu-arrow" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</div>
<div class="kingz-submenu">
<a href="{{ link('bits/') }}" class="kingz-submenu__link">БитМагазин</a>
<a href="{{ link('bits/featured') }}" class="kingz-submenu__link">Рекомендуемое</a>
<xf:if is="$xf.visitor.user_id">
<a href="{{ link('bits/orders') }}" class="kingz-submenu__link">Мои покупки</a>
<a href="{{ link('account/wallet') }}" class="kingz-submenu__link">Мой кошелёк</a>
</xf:if>
</div>
</li>
<li class="kingz-p-nav-list__item has-submenu">
<div class="kingz-p-navEl">
<svg class="kingz-nav-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
Resources
<svg class="kingz-submenu-arrow" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</div>
<div class="kingz-submenu">
<a href="{{ link('resources/') }}" class="kingz-submenu__link">Все ресурсы</a>
<a href="{{ link('resources/categories') }}" class="kingz-submenu__link">Категории</a>
<xf:if is="$xf.visitor.user_id">
<a href="{{ link('resources/authors', $xf.visitor) }}" class="kingz-submenu__link">Мои ресурсы</a>
</xf:if>
</div>
</li>
<li class="kingz-p-nav-list__item">
<a href="{{ link('') }}" class="kingz-p-navEl">
<svg class="kingz-nav-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
Kingz Community
</a>
</li>
<li class="kingz-p-nav-list__item has-submenu">
<div class="kingz-p-navEl">
<svg class="kingz-nav-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</svg>
Help
<svg class="kingz-submenu-arrow" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</div>
<div class="kingz-submenu">
<a href="{{ link('help/') }}" class="kingz-submenu__link">Помощь</a>
<a href="{{ link('help/faq') }}" class="kingz-submenu__link">FAQ</a>
<a href="{{ link('help/rules') }}" class="kingz-submenu__link">Правила</a>
<a href="{{ link('help/support') }}" class="kingz-submenu__link">Поддержка</a>
</div>
</li>
<li class="kingz-p-nav-list__item">
<a href="{{ link('chat/') }}" class="kingz-p-navEl">
<svg class="kingz-nav-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
</svg>
Chat
<span style="margin-left: auto; background: #26bb74; color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem;">0</span>
</a>
</li>
</ul>
</div>
<!-- Футер меню (скрыт) -->
<div class="kingz-menu-footer" style="display: none;">
<!-- Профиль скрыт -->
</div>
</nav>
<!-- Затемнение фона -->
<div class="kingz-menu-overlay" id="kingzMenuOverlay"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.getElementById('kingzMenuToggle');
const offCanvasMenu = document.getElementById('kingzOffCanvasMenu');
const menuOverlay = document.getElementById('kingzMenuOverlay');
function toggleMenu() {
menuToggle.classList.toggle('active');
offCanvasMenu.classList.toggle('active');
menuOverlay.classList.toggle('active');
// Блокировка прокрутки body при открытом меню
document.body.style.overflow = offCanvasMenu.classList.contains('active') ? 'hidden' : '';
}
menuToggle.addEventListener('click', toggleMenu);
menuOverlay.addEventListener('click', toggleMenu);
// Обработка подменю
const submenuItems = document.querySelectorAll('.kingz-p-nav-list__item.has-submenu .kingz-p-navEl');
submenuItems.forEach(item => {
item.addEventListener('click', function(e) {
if (this.getAttribute('href')) {
// Если есть ссылка, переходим по ней
return;
}
e.preventDefault();
e.stopPropagation();
const parentItem = this.closest('.kingz-p-nav-list__item');
const isActive = parentItem.classList.contains('active');
// Закрываем все остальные подменю
document.querySelectorAll('.kingz-p-nav-list__item.active').forEach(activeItem => {
if (activeItem !== parentItem) {
activeItem.classList.remove('active');
}
});
// Переключаем текущее подменю
parentItem.classList.toggle('active');
});
});
// Закрытие меню при клике на обычную ссылку
const menuLinks = document.querySelectorAll('.kingz-submenu__link, .kingz-p-navEl[href]');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
setTimeout(() => {
if (offCanvasMenu.classList.contains('active')) {
toggleMenu();
}
}, 300);
});
});
// Закрытие меню при нажатии Escape
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && offCanvasMenu.classList.contains('active')) {
toggleMenu();
}
});
// Закрытие подменю при клике вне меню
menuOverlay.addEventListener('click', function() {
document.querySelectorAll('.kingz-p-nav-list__item.active').forEach(item => {
item.classList.remove('active');
});
});
});
</script>
Это на какую версию?
2.2.17
Устанавливал, полет отличный.
