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

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

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

CabinetAdmin 03 июл 2015, 18:50 Сообщение

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


Изображение

Изображение


На данный момент есть три стиля навигации
Развернуть Смотреть скриншоты:


Настройка меню описана в настройках расширения.

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




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

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

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

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

eska 03 июл 2015, 21:13 Сообщение

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

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

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

eska 03 июл 2015, 21:25 Сообщение

CabinetAdmin писал(а):Источник цитаты Чтобы изменить стиль меню нужно изменить в блоке:

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

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

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

eska 03 июл 2015, 21:40 Сообщение

Вот код:

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

<div class="menu-navbar" role="navigation"> <div class="inner"> <ul id="menubar" class="menubar menubar-black linklist" role="menubar"> <li data-skip-responsive="true"><a href="{U_INDEX}" data-navbar-reference="index">{L_INDEX}</a></li> <li><a href="#" role="menuitem">В разработке</a> <ul> <li><a href="#">В разработке</a> <ul> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> </ul> </li> <li><a href="#">В разработке</a> <ul> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> </ul> </li> <li><a href="#">В разработке</a> <ul> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> </ul> </li> <li><a href="#">В разработке</a> <ul> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> <li><a href="#">В разработке</a></li> <li><a href="#">ПВ разработке</a></li> </ul> </li> </ul> </li> <li><a href="#" role="menuitem">В разработке</a></li> <li><a href="#" role="menuitem">В разработке</a></li> </div> </div>

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

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

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

CabinetAdmin 04 июл 2015, 07:01 Сообщение

Потому что в остальных его нет. Достаточно его добавить по примеру первого пункта:

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

<li><a href="#" role="menuitem">Пункт 1</a> <ul> <li><a href="#">Пункт 1.1</a> <ul> <li><a href="#">Пункт 1.1.1</a></li> <li><a href="#">Пункт 1.1.2</a></li> <li><a href="#">Пункт 1.1.3</a></li> <li><a href="#">Пункт 1.1.4</a></li> </ul> </li> </ul> </li>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

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

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

eska 04 июл 2015, 07:18 Сообщение

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

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

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

eska 04 июл 2015, 07:33 Сообщение

Сам разобрался, для других искать с munebar.css

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

.menubar ul a { padding: 10px; width: 300px; display: block; white-space: nowrap; float: none; text-transform: none;

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

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

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

eska 04 июл 2015, 07:37 Сообщение

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

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

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

eska 04 июл 2015, 07:53 Сообщение

Текст и всё что с ним связано тут:)

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

.menubar a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 13px Arial, Helvetica; text-decoration: none;
Форум технической поддержки ГАЗ - http://gaz-autoclub.ru
СПб клуб автолюбителей Chery amulet - http://cheryspbclub.luckbb.ru/index.php

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

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

romaamor 05 июл 2015, 19:29 Сообщение

CabinetAdmin, а можно сделать что бы это меню, при прокрутке страницы в низ - останавливалось в верху экрана ?

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

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

eska 05 июл 2015, 19:48 Сообщение

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

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

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

CabinetAdmin 05 июл 2015, 19:58 Сообщение

Можно.

Надо создать файл overall_footer_after в папке event с содержимым:

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

<script> jQuery("document").ready(function($){ var nav = $('.menu-navbar'); $(window).scroll(function () { if ($(this).scrollTop() > 136) { nav.addClass("fixed-nav"); } else { nav.removeClass("fixed-nav"); } }); }); </script>


136 - это количество строк при прокрутке.

В стили добавить:

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

.fixed-nav { z-index: 9999; position: fixed; top: 0; width: 100%; max-width: 1152px; margin: 0 !important; }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

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

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

romaamor 05 июл 2015, 22:26 Сообщение

Не получается. Видать какое то расширение мешает. Выключал расширения которые на мой взгляд конфликтовали, но не заработало. На тестовых работает отлично.

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

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

romaamor 05 июл 2015, 23:12 Сообщение

Нашёл что мешало. Кнопки в верх, в низ. Буду искать другие.

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

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

CabinetAdmin 06 июл 2015, 17:12 Сообщение

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



Похожие темы

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

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

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