Различия
Здесь показаны различия между двумя версиями данной страницы.
Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
domain_menu [2021/08/17 10:46] admin |
domain_menu [2021/10/19 13:00] phaust удалено |
||
---|---|---|---|
Строка 2: | Строка 2: | ||
В блок меню в разделе Дизайн надо скопировать: | В блок меню в разделе Дизайн надо скопировать: | ||
- | |||
<code> | <code> | ||
Строка 11: | Строка 10: | ||
classes: 'navbar-expand-lg navbar-light bg-light mb-2', | classes: 'navbar-expand-lg navbar-light bg-light mb-2', | ||
items: [ | items: [ | ||
+ | // Новые кнопки добавлять в этот список | ||
{name: 'ИГРЫ', url:'index.php'}, | {name: 'ИГРЫ', url:'index.php'}, | ||
{name: 'АРХИВ', url:'archive.php'}, | {name: 'АРХИВ', url:'archive.php'}, | ||
Строка 21: | Строка 21: | ||
</code> | </code> | ||
+ | |||
+ | ===== Настройка кнопок в меню ===== | ||
+ | Кнопки перечислены в разделе **items** - одна строка - одна кнопка. | ||
+ | |||
+ | Первые две кнопки видно всегда. | ||
+ | |||
+ | Кнопка профиль добавляется автоматически. | ||
+ | |||
+ | ==== Ссылки на страницы домена ==== | ||
+ | |||
+ | Например, страничка с часто задаваемыми вопросами - надо заполнить самостоятельно. Можно указать другой id, если надо несколько подобных страниц. | ||
<code> | <code> | ||
+ | {name: 'F.A.Q.', url:'page.php?id=faq'}, | ||
</code> | </code> | ||
+ | ==== Ссылки на внешние страницы ==== | ||
+ | Например, ссылка на telegram чат или канал. **target:'_blank'** - означает, что надо открывать в новой вкладке. | ||
+ | <code> | ||
+ | {name: 'TELEGRAM', url:'https://t.me/qeng_authors', target:'_blank'}, | ||
+ | </code> | ||
+ | |||
+ | ===== Настройка классов ===== | ||
+ | Можно менять набор классов в строке | ||
+ | <code> | ||
+ | classes: 'navbar-expand-lg navbar-light bg-light mb-2', | ||
+ | </code> | ||
+ | |||
+ | Классы указываются через пробел. | ||
+ | |||
+ | ==== Авто-сворачивание тулбара ==== | ||
+ | |||
+ | Для того, чтобы на широких экранах было видно все кнопки, то можно добавить **один из этих классов** | ||
+ | * **navbar-expand-xl** - все кнопки на одной строке, если экран шире 1200 пикселей. | ||
+ | * **navbar-expand-lg** - все кнопки на одной строке, если экран шире 992 пикселей. | ||
+ | * **navbar-expand-md** - все кнопки на одной строке, если экран шире 768 пикселей. | ||
+ | * **navbar-expand-sm** - все кнопки на одной строке, если экран шире 576 пикселей. | ||
+ | |||
+ | ==== Цветовой стиль ==== | ||
+ | Для светлого тулбара надо добавить классы **navbar-light bg-light** | ||
+ | |||
+ | Для темного тулбара надо добавить классы **navbar-dark bg-dark** | ||
+ | |||
+ | ==== Отступ под тулбаром ==== | ||
+ | Для отступа под тулбаром надо добавить один из классов **mb-1 mb-2 mb-3 mb-4 mb-5**. Чем цифра больше, тем отступ больше. | ||
+ | |||
+ | ===== Логотип ===== | ||
+ | На тулбар слева можно добавить логотип. | ||
+ | |||
+ | Для этого надо добавить секцию **logo** после **classes** | ||
+ | |||
+ | Вот так можно добавить картинку | ||
+ | <code> | ||
+ | logo: '<img style="height:36px;" class="mr-3" src="https://qeng.org/apple-touch-icon.png"></img>', | ||
+ | </code> |