Название расширения: Menubar
Требования: phpBB 3.1.4 и выше, phpBB 3.2.0
Описание расширения: Добавляет на форум пользовательское горизонтальное адаптивное меню с выпадающим списком. Меню располагается ниже или выше существующей навигации. При уменьшении размера экрана меню сворачивается, так же как и существующие группы ссылок на форумах phpBB 3.1.x (в верхней части форума "Ссылки" или внизу, там где часовой пояс). Сворачивание происходит по одному пункту, по мере уменьшения ширины экрана.
Скачать:
Версия: 1.1.0
menubar-1.1.0.zip
15.48 КБ 813 скачиваний
Изображение

Изображение


На данный момент есть три стиля навигации
+Смотреть скриншоты:
Настройка меню описана в настройках расширения.

На данный момент доступны стили: menubar-pro, menubar-pro2 и menubar-black.

Последние изменения.
С версии 1.1.0 изменён принцип отображения всплывающего меню в свёрнутом состоянии. Теперь пункты отображаются сразу же под своим "родителем", но с небольшим отступом слева.
+История расширения

Последний этап эволюции расширения доступен для 3.3 версии здесь - viewtopic.php?f=157&t=5035
Меню с созданием пунктов без применения html кода, созданием путём добавления каждого пункта так же как при создании форумов.
Комментарии: 310

CabinetAdmin 27 ноя 2022, 16:23 Сообщение

Примерно так же как и там:

Код: Выделить всё

.menubar-black a:hover {
	background: #289dcc;
}
romaamor писал(а): 27 ноя 2022, 15:36 Как вставить форму поиска
Не вставить. Нет там такой возможности, надо структуру менять тогда.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 27 ноя 2022, 16:45 Сообщение

надо структуру менять тогда
Могу предложить такой вариант.
В шаблоне menubar, в конце перед:

Код: Выделить всё

</div>
<!-- ENDIF -->
добавить форму поиска из хедера:

Код: Выделить всё

	<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
		<div id="search-box" class="search-header" role="search">
			<form action="{U_SEARCH}" method="get" id="search">
			<fieldset>
				<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
				<button class="button button-search" type="submit" title="{L_SEARCH}">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
				</button>
				<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
					<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
				</a>
				{S_SEARCH_HIDDEN_FIELDS}
			</fieldset>
			</form>
		</div>
	<!-- ENDIF -->
В хедере её соответственно надо удалить.

Добавить стили:

Код: Выделить всё

.menu-navbar {
	display: flex;
}
#menubar #tabs {
	flex: 1;
}
.menubar {
	border-radius: 6px 0 0 6px;
}
.menu-navbar .search-header {
	border-radius: 0 6px 6px 0;
	background-image: linear-gradient(#109EE5, #0077B2);
	padding: 6px 5px;
	box-shadow: none;
	margin: 0;
}
Это я пример для одного из стандартных стилей меню. Остаётся только подкрасить под себя.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 27 ноя 2022, 16:55 Сообщение

CabinetAdmin писал(а): 27 ноя 2022, 16:23 Примерно так же как и там:
Во. Теперь внешне почти как и меню на WordPress.
CabinetAdmin писал(а): 27 ноя 2022, 16:23 Не вставить. Нет там такой возможности, надо структуру менять тогда.
Ну да и ладно. Добавил в меню ссылку на страницу с поиском.
CabinetAdmin писал(а): 27 ноя 2022, 16:45
CabinetAdmin писал(а): 27 ноя 2022, 16:45 Могу предложить такой вариант.
Пока оставлю в виде ссылки. А потом попробую вставить в меню.
Спасибо за помощь. :drink:
  • 0

romaamor 11 мар 2023, 22:36 Сообщение

Добрый вечер.
Стоит стиль aero и ваше меню. В стиле есть кнопка смены цвета форума.
Изображение
Можно ли сделать что бы при смене цвета форума менялся и фон меню ?
На сколько я понял, там при смене основного цвета меняются стили со своими отдельными background-color

В расширении тоже есть свой background но он фиксированный.
  • 0

CabinetAdmin 12 мар 2023, 08:27 Сообщение

Можно добавить

Код: Выделить всё

.black .menubar-black {
	background-color: #0b0b0e;
}
.green .menubar-black {
	background-color: #003803;
}
.pink .menubar-black {
	background-color: #390023;
}
.purple .menubar-black {
	background-color: #150037;
}
.red .menubar-black {
	background-color: #310004;
}
/* Hover */
.black .menubar-black a:hover {
	background-color: #000000;
}
.green .menubar-black a:hover {
	background-color: #002802;
}
.pink .menubar-black a:hover {
	background-color: #240016;
}
.purple .menubar-black a:hover {
	background-color: #0f0027;
}
.red .menubar-black a:hover {
	background-color: #1d0003;
}
Ну либо вместо background-color сделать background, чтобы не было затемнения слева.


зы. Плюс, как мне кажется, в данном стиле неуместна синяя обводка рамки из просильвера, это у .menubar-black box-shadow.
зыы. Так же советую у .menubar a padding: 14px 10px; 14 уменьшить до 12, а то пункты меню по умолчанию свёрнуты.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 12 мар 2023, 11:47 Сообщение

Всё получилось. Спасибо.
  • 0

romaamor 12 мар 2023, 12:05 Сообщение

CabinetAdmin писал(а): 12 мар 2023, 08:27 14 уменьшить до 12, а то пункты меню по умолчанию свёрнуты.
А вот это судя по всему не помогло. У меня отображается нормально, а вот у других пользователях свёрнуты пункты меню.
  • 0

CabinetAdmin 12 мар 2023, 19:56 Сообщение

Скорее всего это из-за ссылки с иконкой в самом начале. Ссылка должна быть обёрнута в <li>.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 12 мар 2023, 20:06 Сообщение

А сейчас как ?
  • 0

CabinetAdmin 12 мар 2023, 20:40 Сообщение

Сейчас нормально.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 10 дек 2023, 10:52 Сообщение

Не помешало бы файл services.yml подправить.
  • 0

Похожие темы