Различия

Здесь показаны различия между двумя версиями данной страницы.

--- domain_menu [2021/08/17 10:26]
admin создано
+++ domain_menu [2021/10/19 13:00]
phaust удалено
@@ Строка 1: / Строка 1: @@
 ====== Настройка меню домена ======
+В блок меню в разделе Дизайн надо скопировать:
+<code>
+<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>
+</code>
+===== Настройка кнопок в меню =====
+Кнопки перечислены в разделе **items** - одна строка - одна кнопка.
+Первые две кнопки видно всегда.
+Кнопка профиль добавляется автоматически.
+==== Ссылки на страницы домена ====
+Например, страничка с часто задаваемыми вопросами - надо заполнить самостоятельно. Можно указать другой id, если надо несколько подобных страниц.
+<code>
+  {name: 'F.A.Q.', url:'page.php?id=faq'},
+</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>