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

Изображение


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

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

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

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

CabinetAdmin 18 июн 2016, 08:07 Сообщение

Какую версию ставили? Я так понял 0.0.2, значит по инструкции из первого сообщения начиная с:
Чтобы изменить стиль меню нужно изменить в блоке:
Если поставить версию 1.0.0., то там всё управление из админки, там всё сразу понятно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

РокРок 19 июн 2016, 01:01 Сообщение

Использовал 0.0.2

Все нашел, поменял, единственное не нашел как поменять цветовую полоску, при наведении мыши?
На картинке она у меня зеленая.
  • 0
Вложения
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li.jpg
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li.jpg (69.1 КБ) 3510 просмотров
IN GOD WE TRUST

CabinetAdmin 19 июн 2016, 08:16 Сообщение

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

.menubar-black ul a:hover {  
	background-color: #0186ba;  
	background-image: -moz-linear-gradient(#acca24, #6f8314);  
	background-image: -webkit-linear-gradient(#acca24, #6f8314);  
	background-image: linear-gradient(#acca24, #6f8314);  
}
Плюс не забудьте про стили для свёрнутого меню, стили помеченные комментарием:

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

/* Responsive menu - menubar-black */
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

РокРок 19 июн 2016, 11:00 Сообщение

Спасибо, нашел!

А про стили для свернутого меню даже и не подумал бы... вечером займусь им )
  • 0
IN GOD WE TRUST

РокРок 21 июн 2016, 12:28 Сообщение

Все отлично, но осталось пару вопросов.

1) Как передвинуть вправо следующий блок, а то он наезжает на предыдущий?
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li.jpg
2) Где в блоках изменить цвета треугольников? (не нашел в блоках)
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li 2.jpg
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li 2.jpg (29.18 КБ) 3412 просмотров
  • 0
IN GOD WE TRUST

CabinetAdmin 21 июн 2016, 15:08 Сообщение

Треугольники.
Тот который чёрный (#444) первый код:

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

.menubar ul li:first-child > a:after {
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
	left: 15px;
	position: absolute;
	top: -6px;
}

.menubar ul ul li:first-child a:after {
	border-color: transparent #3b3b3b transparent transparent;
	border-style: solid;
	border-width: 6px 6px 6px 0;
	left: -6px;
	margin-top: -6px;
	top: 50%;
}
тот который зелёный (#3b3b3b) второй.
И следующие два кода это цвета при наведении:

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

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

.menubar ul ul li:first-child a:hover:after {
	border-right-color: #acca24;
	border-bottom-color: transparent;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

РокРок 21 июн 2016, 18:16 Сообщение

Спасибо! А по первому вопросу? Можно сдвинуть правее открывающееся меню?
  • 0
IN GOD WE TRUST

CabinetAdmin 22 июн 2016, 15:06 Сообщение

Ой, забыл:)

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

.menubar ul li > ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	box-shadow: -1px 0 0 rgba(255,255,255,.3);
left: 150px;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

РокРок 26 июн 2016, 13:05 Сообщение

Спасибо, все ок.

Скажите пожалуйста, а в мобильной версии или когда скриншоты делаются на сторонних сервисах, меню черное, а вовсе не такое как я сделал под цвета сайта, почему?
  • 0
Вложения
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li.jpg
IN GOD WE TRUST

CabinetAdmin 26 июн 2016, 20:23 Сообщение

Похоже на то, что сервис не поддерживает градиенты. Задайте цвет для браузеров/сервисов которые не поддерживают css3 вот здесь:

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

.menubar-black {
	background-color: #111;
	background-image: -moz-linear-gradient(#444, #111);
	background-image: -webkit-linear-gradient(#f5d68d, #dabd72);
	background-image: linear-gradient(#f5d68d, #dabd72);
	box-shadow: 0 1px 1px #666, 0 1px 0 #666 inset;
}
background-color: #111;.
У вас, кстати, и для мазилы чёрный цвет - -moz-linear-gradient(#444, #111)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 28 июн 2016, 10:40 Сообщение

Добрый день, не хочу удалять и заново перезаливать, что нужно добавить, что бы:
При уменьшении размера экрана меню сворачивается, так же как и существующие группы ссылок на форумах phpBB 3.1.x (в верхней части форума "Ссылки" или внизу, там где часовой пояс). Сворачивание происходит по одному пункту, по мере уменьшения ширины экрана.
к версии 0.0.1
  • 0

CabinetAdmin 28 июн 2016, 17:26 Сообщение

На сколько я помню там сама структура начинается так:

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

<div class="menu-navbar" role="navigation">
	<div class="inner">

	<ul id="menubar" class="menubar menubar-pro2 linklist" role="menubar">
Надо заменить её на:

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

<div id="menubar" class="menu-navbar" role="navigation">
	<div id="tabs" class="inner">

	<ul class="menubar menubar-pro2" role="menubar">
Плюс стили немного отличаются, надо из новой версии стили скопировать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 28 июн 2016, 17:46 Сообщение

Так.
Для меня это слишком сложно :lol:
Я скачаю архив 0.0.2 и с заменой через FZ заменю файлы, но я хочу это сделать так, что бы не сбился имеющийся стиль. Как это правильно сделать?
  • 0

KimIVИгорь 29 июн 2016, 13:58 Сообщение

CabinetAdmin, скажите пожалуйста, что можно подправить в коде или в стилях, чтобы уровни раскрывались при клике (тапе), а не при наведении?

ЗЫ. У меня есть ряд пользователей, хаотично пользующихся мышкой :milo: , и их эти всплывашки жутко раздражают. Хотелось бы им угодить :)
  • 0
Ты должен делать добро из зла, потому что его больше не из чего делать. Уоренн Роберт Пенн.

CabinetAdmin 29 июн 2016, 15:07 Сообщение

eska, а чего сложного то?... Сделать замену, как я описал выше, открыть стили из новой версии и скопировать содержимое до:

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

/* Colours style
---------------------------------------- */
потом вставить в свой стилевой файл (menubar.css) до этого же места.
Вместо menubar-pro2 указать ваш класс - menubar-gaz.


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

Похожие темы