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

[CabinetAdmin]

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

[CabinetAdmin]

romaamor, хм... Это из-за стилей портала. Центральная колонка идёт с отступом слева, а она попадает в эту колонку, потому что портал тоже использует тоже событие... Вобсчем поможет замена события с предыдущей страницы.

[romaamor]

Вобсчем поможет замена события

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

[eska]

CabinetAdmin, а мне поможете?

Блин, всё утро проканапачевал код, что бы изменить цвет меню под цвет шапки, может кто поможет, а ?

[eska]

CabinetAdmin, есть 2 ньюанса


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

Спасибо

[CabinetAdmin]

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

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

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

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

например так margin: 10px 8px;

[eska]

CabinetAdmin, спасибо, так гораздо лучше.

[eska]

CabinetAdmin, есть небольшой баг, можно это как-то подправить?

[CabinetAdmin]

Это не баг, это работа overflow: hidden; добавленного к #wrap { (common.css). Не скажу про данный стиль, но в чистом просильвере его нет.

[southklad]

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

[KimIV]

Сворачивание происходит по одному пункту, по мере уменьшения ширины экрана.

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

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

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

Спасибо!

[CabinetAdmin]

Сворачивание всеми пунктами сразу было в первой версии, во второй по одному. Вы случайно не из истории версий расширение скачали?

[KimIV]

Вы случайно не из истории версий расширение скачали?

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

[CabinetAdmin]

Не должно одновременно. Меню по функции напоминает собой табы в личном разделе. У вас табы в личном разделе случайно не одновременно сворачиваются?

[KimIV]

У вас табы в личном разделе случайно не одновременно сворачиваются?

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








Спасибо за подсказку! Поизучаю эти табы...