• Внимание, Гость! Для скачивания данного ресурса, тебе необходимо поставить «Like» на данный ресурс.

AURFUN

Меню быстрого доступа

Resource Description

Всем привет.
Сейчас покажу как сделать боковую панель с быстрым перемещением по вашему форуму.
1. Заходим в панель управления → Внешний вид → Виджеты → Добавить виджет.
2. Как нажали кнопку выбираем:
Определение виджета: HTML
Ключ виджета: quick_access
Заголовок: Меню быстрого доступа
Позиции для отображения: Список форумов: боковая панель
1760790586497.webp
Условия отображения: Оставляем пустым
В шаблон вставляем код который будет ниже
<div class="block">
<div class="block-container" data-widget-id="14" data-widget-key="forum_menu_dostup" data-widget-definition="html">

<h3 class="block-minorHeader">Меню быстрого доступа</h3>

<div class="block-body block-row">
<style>
/* Контейнер для скролла */
.quick-access-container {
max-height: 300px; /* можно подогнать под свой макет */
overflow-y: auto;
padding-right: 6px; /* чтобы текст не налезал на скролл */
scrollbar-width: thin;
scrollbar-color: #2a5298 #171e29;
}

/* Красивый скролл для Chrome/Edge/Safari */
.quick-access-container::-webkit-scrollbar {
width: 6px;
}

.quick-access-container::-webkit-scrollbar-track {
background: #171e29;
border-radius: 4px;
}

.quick-access-container::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #2a5298, #256d85);
border-radius: 4px;
}

.quick-access-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #256d85, #2a5298);
}

/* Стили кнопок */
.quick-access .button {
width: 100%;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 1px solid #31435d;
white-space: nowrap;
transition: all 0.3s ease;
font-size: 13px;
border-radius: 8px;
padding: 15px 18px 13px;
font-weight: 400;
text-align: center;
letter-spacing: .05em;
box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%);
color: #fff;
background: #171e29;
margin: 0 0 10px;
position: relative;
overflow: hidden;
}

.quick-access .button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #1e3c72, #2a5298, #256d85, #2a5298, #1e3c72);
background-size: 400% 400%;
transition: left 0.4s ease;
z-index: 0;
}

.quick-access .button:hover::before {
left: 0;
animation: gradientMove 4s ease infinite;
}

.quick-access .button:hover {
box-shadow: 15 15 15px rgba(37, 109, 133, 0.8),
25 25 25px rgba(42, 82, 152, 0.7),
35 35 35px rgba(30, 60, 114, 0.6);
}

@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.quick-access .button span {
position: relative;
z-index: 1;
}

</style>

<div class="quick-access-container">
<ol class="listPlain quick-access">
<li><a href="Ссылка" class="button"><span class="button-text"><span>Правила проекта</span></span></a></li>
<li><a href="Ссылка" class="button"><span class="button-text"><span>Правила форума</span></span></a></li>
<li><a href="Ссылка" class="button"><span class="button-text"><span>Тех. Раздел Test</span></span></a></li>
<li><a href="Ссылка" class="button"><span class="button-text"><span>Сервер №1</span></span></a></li>
<li><a href="Ссылка" class="button"><span class="button-text"><span>Жалобы Test</span></span></a></li>
<li><a href="Ссылка" class="button"><span class="button-text"><span>Role-Play Биографии</span></span></a></li>

4. Ставим галочку на Расширенный режим
1760790970419.webp

Итог:
1760791009923.webp
  • Like
Реакции: Zenettany
Uploaded:
ID: 106
Fast download through XFDevs CDN

More from this author

Youmii

Author joined
Теги Теги Нет
Any problem with this resource? Report this resource!
Назад
Сверху