[XenForo] Как настроить меню быстрого доступа?

Санек · 8 Окт 2025

Приветствую уважаемые пользователи данного форума хотел бы сегодня рассказать как настроить меню быстрого доступа
Давайте начнем с создания
1.Открываем Внешний вид

2.Нажимаем на "Виджеты"
3.Нажинаем на "Добавить виджет"

4.Выбираем Определение виджета "HTML"
5.Добавить виджет

6. В ключ виджета вставляем "quick_access"
Заголовок:Меню быстрого доступа (по желанию)
7. Позиции для отображения:Список форумов: боковая панель

8.В Условия отображения нечего не ставим

9.В шаблон вставляем следующий код:

<div class="block quick-access" data-widget-id="777" data-widget-key="forum_menu_dostup" data-widget-definition="html"><div class="block-container" style="border-radius: 12px; overflow: hidden; background: linear-gradient(145deg, #0f1729, #1a2436); border: 1px solid #2a3c50; box-shadow: 0 8px 32px rgba(0,0,0,0.3);"><h3 class="block-minorHeader" style="background: linear-gradient(135deg, #1e3c72, #2a5298); color: #fff; padding: 15px 20px; margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: 16px; text-align: center; letter-spacing: 0.5px; border-bottom: 1px solid #2a5298;">Меню быстрого доступа</h3><div class="block-body block-row" style="padding: 20px;"><style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.quick-access {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, #2a5298, transparent);
margin: 8px 0;
}

.quick-access .button {
padding: 0;
width: 100%;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
font-size: 13px;
border-radius: 8px;
padding: 0 16px;
font-weight: 500;
text-align: left;
text-transform: none;
letter-spacing: 0.2px;
border: 1px solid #2a3c50;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
color: #e2e8f0;
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
position: relative;
overflow: hidden;
}

.quick-access .button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}

.quick-access .button:hover::before {
left: 100%;
}

.quick-access .button:hover {
background: linear-gradient(135deg, #1e3c72, #2a5298, #256d85);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 109, 133, 0.4);
border-color: #3b82f6;
color: #ffffff;
}

.quick-access .button:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(37, 109, 133, 0.3);
}

.quick-access .button-text {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}

.quick-access .button-text::before {
content: '›';
font-size: 16px;
opacity: 0.7;
transition: transform 0.3s ease;
flex-shrink: 0;
}

.quick-access .button:hover .button-text::before {
transform: translateX(3px);
opacity: 1;
}

.listPlain.quick-access {
margin: 0;
padding: 0;
list-style: none;
}

.listPlain.quick-access li {
margin: 0;
padding: 0;
}

/* Специально для длинного текста */
.quick-access .button:last-child .button-text {
font-size: 12.5px;
letter-spacing: 0.1px;
}

</style><ol class="listPlain quick-access"><li><a href="/forums/73/" class="button"><span class="button-text">Новости и информация</span></a></li><hr><li><a href="forums/8" class="button"><span class="button-text">Технический раздел</span></a></li><hr><li><a href="forums/72/" class="button"><span class="button-text">Правила сервера</span></a></li><hr><li><a href="forums/20" class="button"><span class="button-text">Жалобы Bloom</span></a></li><hr><li><a href="/forums/45/" class="button"><span class="button-text">Стать администратором</span></a></li></ol></div></div></div>

Итог: Вы Добавили Меню быстрого доступа
Настройка меню быстрого доступа
1.Заходим в виджеты нажимаем на "Меню быстрого доступа"
2.Листаете вниз до шаблона
3.Заменяете ссылку на вашу соц сеть

JustAlex · 8 Окт 2025

Санек написал(а):
Приветствую уважаемые пользователи данного форума хотел бы сегодня рассказать как настроить меню быстрого доступа
Давайте начнем с создания
1.Открываем Внешний вид
Посмотреть вложение 13613
2.Нажимаем на "Виджеты"
3.Нажинаем на "Добавить виджет"
Посмотреть вложение 13614
4.Выбираем Определение виджета "HTML"
5.Добавить виджет
Посмотреть вложение 13618
6. В ключ виджета вставляем "quick_access"
Заголовок:Меню быстрого доступа (по желанию)
7. Позиции для отображения:Список форумов: боковая панель
Посмотреть вложение 13616
8.В Условия отображения нечего не ставим
Посмотреть вложение 13617
9.В шаблон вставляем следующий код:

OFFTOP

<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="/threads/3/" class="button"><span class="button-text"><span>Правила проекта</span></span></a></li>
<li><a href="/forums/7/" class="button"><span class="button-text"><span>Правила форума</span></span></a></li>
<li><a href="/forums/8/" class="button"><span class="button-text"><span>Тех. Раздел Test</span></span></a></li>
<li><a href="/forums/13/" class="button"><span class="button-text"><span>Сервер №1</span></span></a></li>
<li><a href="/forums/20/" class="button"><span class="button-text"><span>Жалобы Test</span></span></a></li>
<li><a href="/forums/14/" class="button"><span class="button-text"><span>Role-Play Биографии</span></span></a></li>

10.На расширенный режим ставим галочку (по желанию)

Итог: Вы Добавили Меню быстрого доступа
Настройка меню быстрого доступа
1.Заходим в виджеты нажимаем на "Меню быстрого доступа"
2.Листаете вниз до шаблона
3.Заменяете ссылку на вашу соц сеть

Код надо добавлять под тег "Код", а не под оффтоп, а также ещё для большего кода его надо брать под спойлер

Санек · 8 Окт 2025

это первая тема не суди строго

JustAlex · 8 Окт 2025

Санек написал(а):
это первая тема не суди строго

Та без б, просто запомни это. И правила в будущем нарушать не будешь и для удобства других это

Pavnik · 8 Окт 2025

годно

viovit · 8 Окт 2025

Санек написал(а):
10.На расширенный режим ставим галочку (по желанию)

понял

Санек · 8 Окт 2025

viovit написал(а):
понял

боже что сразу ржать

viovit · 8 Окт 2025

Санек написал(а):
боже что сразу ржать

а для чего ты пишешь то, чего не знаешь? может стоило бы изучить что делает эта функция для начала, а потом уже писать "по желанию"?

Санек · 8 Окт 2025

viovit написал(а):
а для чего ты пишешь то, чего не знаешь? может стоило бы изучить что делает эта функция для начала, а потом уже писать "по желанию"?

поправил доволен?

viovit · 8 Окт 2025

viovit написал(а):
а для чего ты пишешь то, чего не знаешь? может стоило бы изучить что делает эта функция для начала, а потом уже писать "по желанию"?

я даже не буду стараться тебе объяснить что делает эта функция, просто покажу что будет если ее включить и думаю ты сам поймешь, что ее включать "по желанию" не стоит

Санек · 8 Окт 2025

лан не хочу сору устраивать

Санек · Вторник в 15:35

up,обновлен дизайн

LIVE SAMP

[XenForo] Как настроить меню быстрого доступа?

Добро пожаловать!

Санек

Вложения

JustAlex

Лучше плохо начать, чем хорошо бездействовать

Санек

JustAlex

Лучше плохо начать, чем хорошо бездействовать

Pavnik

viovit

Санек

viovit

Санек

viovit

Санек

Санек