Это старая версия документа!
Настройка меню домена
В блок меню в разделе Дизайн надо скопировать:
<script> // https://wiki.qeng.org/doku.php?id=domain_menu add_navbar({ classes: 'navbar-expand-lg navbar-light bg-light mb-2', items: [ // Новые кнопки добавлять в этот список {name: 'ИГРЫ', url:'index.php'}, {name: 'АРХИВ', url:'archive.php'}, {name: 'РЕЙТИНГ', url:'ratings.php'}, ], username: '!username!', }); </script>
Настройка кнопок в меню
Кнопки перечислены в разделе items - одна строка - одна кнопка.
Первые две кнопки видно всегда.
Кнопка профиль добавляется автоматически.
Ссылки на страницы домена
Например, страничка с часто задаваемыми вопросами - надо заполнить самостоятельно. Можно указать другой id, если надо несколько подобных страниц.
{name: 'F.A.Q.', url:'page.php?id=faq'},
Ссылки на внешние страницы
Например, ссылка на telegram чат или канал. target:'_blank' - означает, что надо открывать в новой вкладке.
{name: 'TELEGRAM', url:'https://t.me/qeng_authors', target:'_blank'},
Настройка классов
Можно менять набор классов в строке
classes: 'navbar-expand-lg navbar-light bg-light mb-2',
Классы указываются через пробел.
Авто-сворачивание тулбара
Для того, чтобы на широких экранах было видно все кнопки, то можно добавить один из этих классов
- 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
Вот так можно добавить картинку
logo: '<img style="height:36px;" class="mr-3" src="https://qeng.org/apple-touch-icon.png"></img>',