Страница 1 из 21

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

Добавлено: 03 июл 2015, 18:50
CabinetAdmin
Название расширения: 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 кода, созданием путём добавления каждого пункта так же как при создании форумов.

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

Добавлено: 03 июл 2015, 21:13
eska
Пока не тестил, но спасибо огромнейшее.

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

Добавлено: 03 июл 2015, 21:25
eska
CabinetAdmin писал(а): Чтобы изменить стиль меню нужно изменить в блоке:
А где именно?

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

Добавлено: 03 июл 2015, 21:40
eska
Вот код:

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

<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>
Но выпадает только первое меню "В разработке" остальные нет((

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

Добавлено: 04 июл 2015, 07:01
CabinetAdmin
Потому что в остальных его нет. Достаточно его добавить по примеру первого пункта:

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

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

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

Добавлено: 04 июл 2015, 07:18
eska
CabinetAdmin, спасибо, сегодня с утра с холодной головой разобрался, можно ли сделать пошире раскрывающее меню?
Изображение

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

Добавлено: 04 июл 2015, 07:33
eska
Сам разобрался, для других искать с munebar.css

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

.menubar ul a {
	padding: 10px;
	width: 300px;
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
2 строка

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

Добавлено: 04 июл 2015, 07:37
eska
Теперь буду разбираться как сделать побольше шрифт в сплывающим меню :unknown

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

Добавлено: 04 июл 2015, 07:53
eska
Текст и всё что с ним связано тут:)

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

.menubar a {
	float: left;
	padding: 12px 30px;
	color: #999;
	text-transform: uppercase;
	font: bold 13px Arial, Helvetica;
	text-decoration: none;

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

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

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

Добавлено: 05 июл 2015, 19:48
eska
romaamor, снял с языка :drink:

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

Добавлено: 05 июл 2015, 19:58
CabinetAdmin
Можно.

Надо создать файл 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;
}

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

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

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

Добавлено: 05 июл 2015, 23:12
romaamor
Нашёл что мешало. Кнопки в верх, в низ. Буду искать другие.

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

Добавлено: 06 июл 2015, 17:12
CabinetAdmin
Что за кнопки? Можно попробовать их подружить.