Страница 10 из 21
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 03 июл 2015, 18:50
CabinetAdmin
Название расширения: Menubar
Требования: phpBB 3.1.4 и выше, phpBB 3.2.0
Описание расширения: Добавляет на форум пользовательское горизонтальное адаптивное меню с выпадающим списком. Меню располагается ниже или выше существующей навигации. При уменьшении размера экрана меню сворачивается, так же как и существующие группы ссылок на форумах phpBB 3.1.x (в верхней части форума "Ссылки" или внизу, там где часовой пояс). Сворачивание происходит по одному пункту, по мере уменьшения ширины экрана.
Скачать:
Версия: 1.1.0
На данный момент есть три стиля навигации
Настройка меню описана в настройках расширения.
На данный момент доступны стили:
menubar-pro
,
menubar-pro2
и
menubar-black
.
Последние изменения.
С версии 1.1.0 изменён принцип отображения всплывающего меню в свёрнутом состоянии. Теперь пункты отображаются сразу же под своим "родителем", но с небольшим отступом слева.
+История расширения
Версия: 0.0.2
Версия: 1.0.0
Управление из адм. раздела.
Версия: 0.0.1
Все пункты меню прячутся одновременно. Без управления из адм. раздела.
[ Свернуть ]
Последний этап эволюции расширения доступен для 3.3 версии здесь -
viewtopic.php?f=157&t=5035
Меню с созданием пунктов без применения html кода, созданием путём добавления каждого пункта так же как при создании форумов.
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 18 июн 2016, 08:07
CabinetAdmin
Какую версию ставили? Я так понял 0.0.2, значит по инструкции из первого сообщения начиная с:
Чтобы изменить стиль меню нужно изменить в блоке:
Если поставить версию 1.0.0., то там всё управление из админки, там всё сразу понятно.
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 19 июн 2016, 01:01
Рок
Использовал 0.0.2
Все нашел, поменял, единственное не нашел как поменять цветовую полоску, при наведении мыши?
На картинке она у меня зеленая.
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 19 июн 2016, 08:16
CabinetAdmin
Код: Выделить всё
.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);
}
Плюс не забудьте про стили для свёрнутого меню, стили помеченные комментарием:
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 19 июн 2016, 11:00
Рок
Спасибо, нашел!
А про стили для свернутого меню даже и не подумал бы... вечером займусь им )
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 21 июн 2016, 12:28
Рок
Все отлично, но осталось пару вопросов.
1) Как передвинуть вправо следующий блок, а то он наезжает на предыдущий?
2) Где в блоках изменить цвета треугольников? (не нашел в блоках)
- Menubar - Горизонтальное адаптивное меню с выпадающим списком - li 2.jpg (29.18 КБ) 3411 просмотров
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 21 июн 2016, 15:08
CabinetAdmin
Треугольники.
Тот который чёрный (#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;
}
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 21 июн 2016, 18:16
Рок
Спасибо! А по первому вопросу? Можно сдвинуть правее открывающееся меню?
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 22 июн 2016, 15:06
CabinetAdmin
Ой, забыл:)
Код: Выделить всё
.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;
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 26 июн 2016, 13:05
Рок
Спасибо, все ок.
Скажите пожалуйста, а в мобильной версии или когда скриншоты делаются на сторонних сервисах, меню черное, а вовсе не такое как я сделал под цвета сайта, почему?
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 26 июн 2016, 20:23
CabinetAdmin
Похоже на то, что сервис не поддерживает градиенты. Задайте цвет для браузеров/сервисов которые не поддерживают 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)
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 28 июн 2016, 10:40
eska
Добрый день, не хочу удалять и заново перезаливать, что нужно добавить, что бы:
При уменьшении размера экрана меню сворачивается, так же как и существующие группы ссылок на форумах phpBB 3.1.x (в верхней части форума "Ссылки" или внизу, там где часовой пояс). Сворачивание происходит по одному пункту, по мере уменьшения ширины экрана.
к версии 0.0.1
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 28 июн 2016, 17:26
CabinetAdmin
На сколько я помню там сама структура начинается так:
Код: Выделить всё
<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">
Плюс стили немного отличаются, надо из новой версии стили скопировать.
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 28 июн 2016, 17:46
eska
Так.
Для меня это слишком сложно
Я скачаю архив 0.0.2 и с заменой через FZ заменю файлы, но я хочу это сделать так, что бы не сбился имеющийся стиль. Как это правильно сделать?
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 29 июн 2016, 13:58
KimIV
CabinetAdmin, скажите пожалуйста, что можно подправить в коде или в стилях, чтобы уровни раскрывались при клике (тапе), а не при наведении?
ЗЫ. У меня есть ряд пользователей, хаотично пользующихся мышкой
, и их эти всплывашки жутко раздражают. Хотелось бы им угодить
Menubar - Горизонтальное адаптивное меню с выпадающим списком
Добавлено: 29 июн 2016, 15:07
CabinetAdmin
eska, а чего сложного то?... Сделать замену, как я описал выше, открыть стили из новой версии и скопировать содержимое до:
Код: Выделить всё
/* Colours style
---------------------------------------- */
потом вставить в свой стилевой файл (menubar.css) до этого же места.
Вместо
menubar-pro2
указать ваш класс -
menubar-gaz
.
KimIV, ну это не сложно сделать, надо посмотреть:)