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

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

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

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

eska, принцип такой же, как несколькими постами выше, в файле overall_header_page_body_before.html заменить menubar-black на menubar-gaz, в конец menubar.css:

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

/* menubar-gaz */ .menubar-gaz { background-color: #6691B5; background-image: -moz-linear-gradient(#6691B5, #557A97); background-image: -webkit-linear-gradient(#6691B5, #557A97); background-image: linear-gradient(#6691B5, #557A97); } .menubar-gaz li { border-right: 1px solid #DFDFDF; box-shadow: 1px 0 0 #6691B5; } .menubar-gaz a { color: #FFFFFA; } .menubar-gaz li:hover > a { color: #DFDFDF; } .menubar-gaz li > ul { background: #6691B5; box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 0; } .menubar-gaz ul li { box-shadow: 0 1px 0 #557A97, 0 2px 0 #C1C1C1; } .menubar-gaz ul li:first-child > a:after { border-bottom-color: #6691B5; } .menubar-gaz ul a:hover { background-color: #557A97; color: #fff; } .menubar-gaz a.menubar-portal { background-color: rgb(194, 45, 39); border-radius: 6px 0 0 6px; } /* Responsive menu - menubar-gaz */ .menubar-gaz .dropdown .dropdown-contents { background-color: #6691B5; border: 0; box-shadow: 0 -1px 0 rgba(255,255,255,.3); padding: 0; } .menubar-gaz .dropdown .pointer { border-color: #6691B5 transparent; } .menubar-gaz .dropdown .pointer-inner { border-color: #6691B5 transparent; } .menu-navbar .menubar-gaz li.responsive-menu a.responsive-menu-link:before { border-color: #FFF; } .menu-navbar .menubar-gaz li.responsive-menu a.responsive-menu-link:hover:before, .menu-navbar .menubar-gaz li.responsive-menu.visible a.responsive-menu-link:before { border-color: #fff; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

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

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

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

romaamor, хм... Это из-за стилей портала. Центральная колонка идёт с отступом слева, а она попадает в эту колонку, потому что портал тоже использует тоже событие... Вобсчем поможет замена события с предыдущей страницы.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

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

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

romaamor 14 янв 2016, 17:02 Сообщение

CabinetAdmin писал(а):Источник цитаты Вобсчем поможет замена события

Точно. Помогло. Спасибо. :drink:

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

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

eska 14 янв 2016, 19:34 Сообщение

CabinetAdmin, а мне поможете?
eska писал(а):Источник цитаты Блин, всё утро проканапачевал код, что бы изменить цвет меню под цвет шапки, может кто поможет, а ?
Форум технической поддержки ГАЗ - http://gaz-autoclub.ru
СПб клуб автолюбителей Chery amulet - http://cheryspbclub.luckbb.ru/index.php

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

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

eska 14 янв 2016, 19:50 Сообщение

CabinetAdmin, есть 2 ньюанса
Изображение

1) Закруглить концы и сделать по растоянию как верхнее меню
2) Кнопку Lifegaz сделать красную.

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

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

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

CabinetAdmin 14 янв 2016, 20:37 Сообщение

C закруглёнными углами меню будет выглядеть инородно, поскольку в стиле все углы прямые, но, как говорится, хозяин барин... Подправил в коде выше.

Расстояние можно добавить тут:

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

.menu-navbar { margin: 10px auto; }

например так margin: 10px 8px;
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

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

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

eska 15 янв 2016, 11:53 Сообщение

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

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

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

eska 15 янв 2016, 16:57 Сообщение

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

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

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

CabinetAdmin 15 янв 2016, 18:41 Сообщение

Это не баг, это работа overflow: hidden; добавленного к #wrap { (common.css). Не скажу про данный стиль, но в чистом просильвере его нет.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

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

igorbond 17 янв 2016, 19:04 Сообщение

У меня тоже крайний блок уходит в право и получается на ноуте например появляется на форуме прокрутка внизу

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

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

KimIV 17 янв 2016, 20:47 Сообщение

CabinetAdmin писал(а):Источник цитаты Сворачивание происходит по одному пункту, по мере уменьшения ширины экрана.

А у меня почему-то прячутся сразу все пункты. И получается, что в довольно широком пока ещё окне браузера меню совсем пустое :(

Пробовал в <li> вставлять data-last-responsive="true". Всё равно все сразу прячутся. Помогает только data-skip-responsive="true". Но тогда где skip, те совсем не прячутся.

Что ещё можно покрутить/изменить? Какие элементы стилей отвечают за прятаемость пунктов?

Спасибо!
Ты должен делать добро из зла, потому что его больше не из чего делать. Уоренн Роберт Пенн.

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

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

CabinetAdmin 18 янв 2016, 16:11 Сообщение

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

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

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

KimIV 18 янв 2016, 19:20 Сообщение

CabinetAdmin писал(а):Источник цитаты Вы случайно не из истории версий расширение скачали?

Не знаю... :unknown Вроде бы из первого сообщения этой темы. По крайней мере имя файла-архива совпадает (menubar-0.0.2.zip), да и в composer.json версия указана 0.0.2

Изображение
Ты должен делать добро из зла, потому что его больше не из чего делать. Уоренн Роберт Пенн.

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

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

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

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

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

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

KimIV 18 янв 2016, 21:21 Сообщение

CabinetAdmin писал(а):Источник цитаты У вас табы в личном разделе случайно не одновременно сворачиваются?

Нет... по одному

Изображение
Изображение
Изображение
Изображение
Изображение
Изображение

Спасибо за подсказку! Поизучаю эти табы...
Ты должен делать добро из зла, потому что его больше не из чего делать. Уоренн Роберт Пенн.



Похожие темы

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

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

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