Название расширения: 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 14 июл 2015, 14:43 Сообщение

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

.fixed-nav {
	z-index: 9999;
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 1152px;
	margin: 0 !important;
	opacity: .6;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.fixed-nav:hover {
	opacity: 1;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 14 июл 2015, 16:00 Сообщение

CabinetAdmin, спасибо, а как немного затемнить, какая строка за это отвечает?
  • 0

CabinetAdmin 14 июл 2015, 19:41 Сообщение

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

eska 14 июл 2015, 19:53 Сообщение

CabinetAdmin, ну да:)
  • 0

eska 14 июл 2015, 19:58 Сообщение

Есть недочеты, с мобильной версии все выглядит так
Menubar - Горизонтальное адаптивное меню с выпадающим списком - Screenshot_2015-07-14-20-02-07.png
по сути нету в ней смысла, есть ли решение, что бы в мобильной версии оно не опускались?
  • 0

CabinetAdmin 14 июл 2015, 20:28 Сообщение

Так:

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

.fixed-nav {
	z-index: 9999;
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 1152px;
	margin: 0 auto !important;
	opacity: .6;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
 
.fixed-nav:hover {
	opacity: 1;
}

@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
	.fixed-nav {
		left: 0;
		right: 0;
	}
}

@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
	/* Отключение фиксации при ширине экрана в 400px */
	.fixed-nav {
		position: relative;
	}
}
Просто именно в мобильнике не отключить, сначала надо определить, что устройство это именно мобильник, а это дополнительные скрипты. Самый простой способ, это просто отключить фиксацию на маленьких экранах, последний код как раз за это и отвечает.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

saturn-z 14 июл 2015, 20:31 Сообщение

О! На счет мобильной версии:
На компе все блоки немного закруглены
Menubar - Горизонтальное адаптивное меню с выпадающим списком - bar1.jpg
А с мобильника все блоки с прямым углом, кроме меню. Выглядит не очень хорошо.
Menubar - Горизонтальное адаптивное меню с выпадающим списком - bar2.jpg
Menubar - Горизонтальное адаптивное меню с выпадающим списком - bar2.jpg (131.57 КБ) 1888 просмотров
Можно ли это исправить?
  • 0

romaamor 15 июл 2015, 00:14 Сообщение

saturn-z
Если Вы на мобильном стиле, про чёрное меню так CabinetAdmin специально сделал его адаптивным. Там список должен выпадать.
  • 0

saturn-z 15 июл 2015, 07:10 Сообщение

romaamor, и к чему вы мне это написали?
Я о том что при маленьком разрешении экрана все блоки с прямыми углами, а меню овальное, и размером меньше чем все остальные блоки.
  • 0

CabinetAdmin 15 июл 2015, 15:16 Сообщение

Действительно:)

Добавьте в menubar.css перед /* Colours style:

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

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.menu-navbar .menubar {
		border-radius: 0;
		margin-left: -5px;
		margin-right: -5px;
	}
}
Сейчас добавлю эти правки в экст.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

saturn-z 15 июл 2015, 20:28 Сообщение

CabinetAdmin писал(а): Сейчас добавлю эти правки в экст
CabinetAdmin, Так не срабатывает, надо так:

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

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.menu-navbar {
		margin-left: -5px;
		margin-right: -5px;
	}
	.menubar {
		border-radius: 0;
	}
}
Спасибо
  • 0

eska 09 сен 2015, 19:20 Сообщение

А можно ли туда это внудрить с прокручиванием, как тут http://cabinetadmina.ru/viewtopic.php?p=64949#p64949
  • 0

eska 09 сен 2015, 20:07 Сообщение

Не как не могу построить базу, нужно:
Изображение
Вот мой код

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

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

	<ul id="menubar" class="menubar menubar-black linklist" role="menubar">
	    <li><a class="menubar-portal" href="http://gaz-autoclub.ru/lifegaz">Lifegaz</a>
		<li><a href="#" role="menuitem">Двигатель</a>
			<ul>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1662">Промывка двигателя</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1660">Проверка свечей на работоспособность</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1657">Регулировка зажигания</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1635">Карбюратор солекс на ЗМЗ-402</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1642">Выбор масла для автомобиля</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=582">Коды ошибок различных ЭБУ для автомобилей ГАЗ</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=189">Основные неисправности системы охлаждения</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=188">Система охлаждения</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=186">Прокладка головки блока (ПГБ)</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=183">Привод трамблера и масляного насоса</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=182">Течь сальниковой набивки</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=173">Модификации ЭБУ</a>
			</ul>
		</li>  
		<li><a href="#" role="menuitem">Электрика</a>
		    <ul>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=53&t=1608">Свечи зажигания</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=53&t=181">Неисправности системы зарядки</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=53&t=192">Секреты трамблёра</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=53&t=187">Стартеры</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=53&t=180">Система зарядки АКБ</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=176">Методика поиска неисправностей в системе зажигания</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=190">Электровентилятор системы охлаждения</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=175">Система зажигания</a>
			</ul>
		</li>  
		<li><a href="#" role="menuitem">Ходовая и рул. управление</a>
		    <ul>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=54&t=1661">Давление в шинах (советы)</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=54&t=1628">Полоски, линии и цыфрц на резине</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=54&t=185">Оси нижних рычагов</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=54&t=184">рулевое управление</a>
			</ul>
		</li>  
		<li><a href="#" role="menuitem">О ГАЗ</a>
		    <ul>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=1673">ГАЗ-21 Волга</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=1648">Ремонт и эксплуатация волга ГАЗ 31105 (книга)</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=529">ГАЗ-14 "Чака"</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=512">ГЗ СГЗ</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=515">ГАЗ - Горьковский автомобильный завод</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=514">ГАЗ-ЦАКС (ГАЗ-ЦАМК)</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=500">ГАЗ-66</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=498">ГАЗ-24 несерийные автомобили</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=75&t=493">ГАЗ-3102 - Директорская "ВОЛГА"</a>
			</ul>
		</li>  
		<li><a href="#" role="menuitem">Топливная система</a>
		    <ul>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=102&t=1658">Факты о дизельном топливе</a>
			</ul>
		</li>  
		<li><a href="#" role="menuitem">Другое</a>
		    <ul>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=101&t=1675">Как бороться с ржавчиной</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=101&t=1674">Шумоизоляция автомобиля своими руками</a>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=101&t=1659">Выбор детского автокресла</a>
			</ul>
		</li>  
	</div>
</div>
Помогите, а, всю голову сломал, даже с горя за пивом пошёл((
  • 0

CabinetAdmin 10 сен 2015, 16:45 Сообщение

eska писал(а): Помогите, а, всю голову сломал, даже с горя за пивом пошёл((
Напилися наверное вчера? :D
eska писал(а): Вот мой код
А которое из всего этого должно быть в подподменю?

Пример:

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

<div class="menu-navbar" role="navigation">
	<div class="inner">
 
	<ul id="menubar" class="menubar menubar-black linklist" role="menubar">
	    <li><a class="menubar-portal" href="http://gaz-autoclub.ru/lifegaz">Lifegaz</a></li>
		<li><a href="#" role="menuitem">Двигатель</a>
			<ul>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1662">Промывка двигателя</a></li>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1660">Проверка свечей на работоспособность</a></li>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1657">Регулировка зажигания</a></li>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1635">Карбюратор солекс на ЗМЗ-402</a></li>
				<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=1642">Выбор масла для автомобиля</a>
					<ul>
						<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=582">Коды ошибок различных ЭБУ для автомобилей ГАЗ</a></li>
						<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=189">Основные неисправности системы охлаждения</a></li>
						<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=188">Система охлаждения</a></li>
						<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=186">Прокладка головки блока (ПГБ)</a></li>
						<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=183">Привод трамблера и масляного насоса</a></li>
						<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=182">Течь сальниковой набивки</a></li>
						<li><a href="http://gaz-autoclub.ru/viewtopic.php?f=52&t=173">Модификации ЭБУ</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#" role="menuitem">Электрика</a>
Кстати, у вас не хватает закрывающих тегов </li>, есть только у тех, у которых есть подменю. Надо бы добавить, в моём примере они расставлены как нужно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 сен 2015, 16:57 Сообщение

CabinetAdmin писал(а): Напилися наверное вчера?
Да :lol:
CabinetAdmin писал(а): А которое из всего этого должно быть в подподменю?
Можете мне просто написать код по моей картинке? ссылки я попробую сам проставить...
  • 0

Похожие темы