Menubar - Горизонтальное адаптивное меню с выпадающим списком

Скрипты и расширения для phpBB 3.1.x
Собственные расширения, допиливание уже существующих.
Свои виды перевода, свои виды стиля расширений под свои нужды.
Аватара пользователя
CabinetAdmin

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

Какую версию ставили? Я так понял 0.0.2, значит по инструкции из первого сообщения начиная с:
Чтобы изменить стиль меню нужно изменить в блоке:


Если поставить версию 1.0.0., то там всё управление из админки, там всё сразу понятно.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

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

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

Аватара пользователя
CabinetAdmin

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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 */
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

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

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

Аватара пользователя
Рок

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

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

1) Как передвинуть вправо следующий блок, а то он наезжает на предыдущий?
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li.jpg


2) Где в блоках изменить цвета треугольников? (не нашел в блоках)
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li 2.jpg
Menubar - Горизонтальное адаптивное меню с выпадающим списком - li 2.jpg (29.18 КБ) 2605 просмотров

Аватара пользователя
CabinetAdmin

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

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

Аватара пользователя
CabinetAdmin

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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;
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Рок

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

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

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

Аватара пользователя
CabinetAdmin

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

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

к версии 0.0.1
Форум технической поддержки ГАЗ - http://gaz-autoclub.ru
СПб клуб автолюбителей Chery amulet - http://cheryspbclub.luckbb.ru/index.php

Аватара пользователя
CabinetAdmin

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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">

Плюс стили немного отличаются, надо из новой версии стили скопировать.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

Так.
Для меня это слишком сложно :lol:
Я скачаю архив 0.0.2 и с заменой через FZ заменю файлы, но я хочу это сделать так, что бы не сбился имеющийся стиль. Как это правильно сделать?
Форум технической поддержки ГАЗ - http://gaz-autoclub.ru
СПб клуб автолюбителей Chery amulet - http://cheryspbclub.luckbb.ru/index.php

Аватара пользователя
KimIV

Menubar - Горизонтальное адаптивное меню с выпадающим списком

KimIV 29 июн 2016, 13:58 Сообщение

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

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

Аватара пользователя
CabinetAdmin

Menubar - Горизонтальное адаптивное меню с выпадающим списком

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

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

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

/* Colours style ---------------------------------------- */

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


KimIV, ну это не сложно сделать, надо посмотреть:)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «Расширения для phpBB 3.1.x»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость