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

Изображение


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

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

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

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

CabinetAdmin 03 янв 2016, 23:12 Сообщение

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

southklad 05 янв 2016, 17:01 Сообщение

Мда вот именно что хммммм, а для меня еще и ХМММХММММММММ
:drink:
  • 0
Изображение

CabinetAdmin 05 янв 2016, 19:54 Сообщение

Хм... Например, в конец menubar.css:

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

/* menubar-vintage */
.menubar-vintage {
	border: 2px solid #484238;
}

.menubar-vintage li {
	border-right: 1px solid #CCC5B8;
}

.menubar-vintage a {
	color: #4F493D;
}

.menubar-vintage ul a {
	color: #28313F;
}

.menubar-vintage li:hover > a {
	color: #d02c2c;
}

.menubar-vintage li > ul {
	background-color: #E2DCD0;
	background-image: -moz-linear-gradient(top, #F3EDE1 0%, #E2DCD0 100%);
	background-image: -webkit-linear-gradient(top, #F3EDE1 0%, #E2DCD0 100%);
	background-image: linear-gradient(to bottom, #F3EDE1 0%, #E2DCD0 100%);
	border: 1px solid #CCC5B8;
}

.menubar-vintage li ul, .menubar-vintage ul li > ul {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.menubar-vintage ul li {
	box-shadow: 0 1px 0 #B9B9B9, 0 2px 0 #FFFFFF;
}

.menubar-vintage ul li:first-child > a:after {
	border-bottom: 6px solid #F3EDE1;
}

.menubar-vintage ul ul li:first-child a:after {
	border-right-color: #F3EDE1;
}

.menubar-vintage ul li:first-child a:hover:after {
	border-bottom-color: #DAD4C8;
}

.menubar-vintage ul ul li:first-child a:hover:after {
	border-right-color: #DAD4C8;
}

.menubar-vintage .dropdown  ul ul li:first-child a:after {
	border-left-color: #F3EDE1;
}

.menubar-vintage .dropdown > ul > li > ul li:first-child a:hover:after {
	border-left-color: #DAD4C8;
}

.menubar-vintage ul a:hover {
	background-color: #DAD4C8;
	color: #000;
}

/* Responsive menu - menubar-vintage */
.menubar-vintage .dropdown .dropdown-contents {
	background-color: #E2DCD0;
	background-image: -moz-linear-gradient(top, #F3EDE1 0%, #E2DCD0 100%);
	background-image: -webkit-linear-gradient(top, #F3EDE1 0%, #E2DCD0 100%);
	background-image: linear-gradient(to bottom, #F3EDE1 0%, #E2DCD0 100%);
	padding: 0;
}

.menubar-vintage .dropdown .pointer-inner {
	border-color: #F3EDE1 transparent;
}

.menubar-vintage .responsive-tab .responsive-tab-link:before {
	border-color: #28313F;
}

.menubar-vintage .responsive-tab .responsive-tab-link:hover:before {
	border-color: #d02c2c;
}
В файле overall_header_page_body_before.html заменить menubar-pro2 на menubar-vintage.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 06 янв 2016, 07:55 Сообщение

Вроде все сделал и у меня стало вот так

Изображение

Свернуто как в мобильном стиле, приходится разворачивать
  • 0
Изображение

CabinetAdmin 06 янв 2016, 08:58 Сообщение

Я совсем забыл... Замените в самом начале:

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

/* menubar-vintage */
.menubar-vintage {
	border: 2px solid #484238;
}
на:

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

/* menubar-vintage */
.menubar-vintage {
	box-shadow: 0 0 0 2px #484238 inset;
}
  • 2
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 06 янв 2016, 09:07 Сообщение

Во, то что надо, смотрится отлично!!! Спасибо добрый человек :drink:
  • 0
Изображение

southklad 06 янв 2016, 09:12 Сообщение

Только вот адаптировать бы его мод мобильные было бы вообще мечта
  • 0
Изображение

CabinetAdmin 06 янв 2016, 10:06 Сообщение

Так оно и адаптируется. При небольшом размере экрана все пункты прячутся так же, например, как в верхнем или нижнем меню, там где "Пользователи" и "Наша команда". Стандартная фишка 3.1 версии форума.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 06 янв 2016, 15:12 Сообщение

Да это есть, но выпадающие пункты не доступны становятся
  • 0
Изображение

CabinetAdmin 06 янв 2016, 17:30 Сообщение

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

romaamor 13 янв 2016, 19:06 Сообщение

CabinetAdmin ,
Как передвинуть меню выше рекламы так как на скрине ?
Изображение

Так же блок как бы уперается в колонку портала.
Изображение

Изображение
Можно исправить ? Спасибо.
  • 0

eska 14 янв 2016, 09:59 Сообщение

Блин, всё утро проканапачевал код, что бы изменить цвет меню под цвет шапки, может кто поможет, а ? :sorry:
  • 0

romaamor 14 янв 2016, 12:57 Сообщение

eska,
Изображение
  • 0

CabinetAdmin 14 янв 2016, 16:23 Сообщение

romaamor, у тебя на форуме для гостей не выставлены права на просмотр портала. Я его не вижу...
А чтобы переместить выше... Видимо расширения используют одно и тоже событие, можно конечно попробовать их отключить, с удалением данных и включить сначала меню, а потом рекламу... Может поможет, может нет, хрен его знает... А можно просто поменять в расширении имя файла overall_header_page_body_before, например на overall_header_page_menubar_before и в шаблоне overall_header перед:

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

<!-- EVENT overall_header_page_body_before -->
добавить:

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

<!-- EVENT overall_header_page_menubar_before -->
зы. Кстати, надо ещё с фиксированием разбираться. У тебя форум сейчас на всю ширину и тот код работает некорректно, тебе надо вместо max-width: 1152px; задать max-width: 93%;.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 14 янв 2016, 16:45 Сообщение

CabinetAdmin писал(а): Я его не вижу...
Был отключён. Сейчас включил. Можно посмотреть.
  • 0

Похожие темы