Помогите с версткой выпадаюше.

[parnas]

Наткнулся в ступор. Не знаю, как сверстать меню на скриншоте. Главная для меня проблема в том что, фон выпадающего меню должен выйти за пределы контейнера. При этом контент должен остаться в контейнере. Как можно это реализовать? Просто раньше никогда не сталкивался подобной задачей. На десерт, порекомендовали бы хорошую Jquery плагин для такой задачи(выпадающее меню). Спасибо заранее.

 

 

[Switch74]

1. делаете блок с нужным фоном на всю ширину экрана

2. внутрь блока с фоном вставляем по центру выравненный и ограниченный по размерам блок с вашим меню

[parnas]

1. делаете блок с нужным фоном на всю ширину экрана

2. внутрь блока с фоном вставляем по центру выравненный и ограниченный по размерам блок с вашим меню

По первому совету делал, задавая ширину 100%. Но не выходить За  пределы ширины родительского пункта, то есть вышестоящего li.

 

Вот код.

<nav class="page_nav">				<div class="layout_center">					<ul class="main_menu ul_menu">						<li class="main_menu_li">							<a class="inverted" href="#">Видеорегистраторы</a>							<ul class="submenu">								<li><a href="#">Штатные автомагнитолы</a></li>								<li><a href="#">Бюджетные антирадары</a></li>								<li><a href="#">Разнесенные (модульные)</a></li>								<li><a href="#">С модулем GPS</a></li>								<li><a href="#">Антистрелки</a></li>								<li><a href="#">Антирадары со скидкой</a></li>								<li><a href="#">GPS информаторы</a></li>								<li><a href="#">Аксессуары к радар-детекторам</a></li>							</ul><!--$submenu-->						</li>						<li class="main_menu_li"><a class="inverted" href="#">Радар-детекторы</a></li>						<li class="main_menu_li"><a class="inverted" href="#">GPS</a></li>						<li class="main_menu_li"><a class="inverted" href="#">навигаторы</a></li>						<li class="main_menu_li"><a class="inverted" href="#">Автомагнитолы</a></li>						<li class="main_menu_li"><a class="inverted" href="#">Автоакустика</a></li>						<li class="main_menu_li"><a class="inverted" href="#">Защита от угна</a></li>						<li class="main_menu_li"><a class="inverted" href="#">Парковка</a></li>						<li class="main_menu_li"><a class="inverted" href="#">Еще ...</a></li>					</ul>				</div>			</nav>

CSS:

.main_menu_li {	position: relative;	>a {		border-bottom: 1px solid transparent;	}}.submenu {	display: none;	position: absolute;	width: 100%;	left: 0;	bottom: 10px;	outline: 1px solid red;	background-color: #ffa100;			li {		display: inline-block;		a {			border-bottom: 1px solid transparent;		}	}}

[Switch74]

убираете у .main_menu_li - position: relative;

bottom: 10px; скорее всего нужно будет убрать у .submenu

сделайте в jsfiddle или еще где рабочий пример

[paralex]

Пока накидывал понял, что вроде вам не это нужно  http://jsfiddle.net/paralex/3mojw5vj/ но как вариант для похожего меню может пригодиться

[parnas]

убираете у .main_menu_li - position: relative;

bottom: 10px; скорее всего нужно будет убрать у .submenu

сделайте в jsfiddle или еще где рабочий пример

 

Убрал у  .main_menu_li - position: relative и bottom: 10px.  Потом обернул в центрирующий контейнер. Получилось то, чего хотелось! Спасибо за помощь.

[parnas]

С версткой меню разобралься. Теперь проблема с динамической частью. Подключил плагин Superfish. Но он не работаеть с моими кодами. Тоесть со своими кодами которых я скопировал из примера работает. Но с моим меню - нет. Чтобы показать оставил и меню из примера. Код подключения внизу перед закрывающего body. Подскажите, пож., что не так с моим разметкой меню? Спасибо.

http://layout.e3w.ru/

 

P.S. Разметка под выпадающего меню только на первом пункте "Видеорегистратоы". Дополнительно - JSFiddle

Edited November 5, 2014 by parnas

[parnas]

Проблема все еще актуално. Пож, помогите найти жука.=)

[Switch74]

1. Зачем вам этот сторонний скрипт не понятно как работающий?

2. Почему не используете hover?

[parnas]

1. Зачем вам этот сторонний скрипт не понятно как работающий?

2. Почему не используете hover?

При ховере выпадающее меню не должно выпадать сразу, как это происходить при Hover е. выпадающее меню должно выпадать через пол секунда. Например, так реализовано в менюшках yandex market.

Edited November 6, 2014 by parnas

[Switch74]

а что, мешает сделать тоже самое через css

http://jsfiddle.net/et9yg6v3/

[parnas]

Спасибо огромное!!! Сейчас попробую переделать. Отпишусь потом!

[paralex]

а что, мешает сделать тоже самое через css

http://jsfiddle.net/et9yg6v3/

Можно вклинуться в ваш разговор с вопросом. Я вот там выше присылал пример тоже меню такого. И сейчас обратил внимания на ситуацию: А если у пункта нету выпадающего меню? То вот этот маркер треугольник у него при наведении все равно появляется. Посмотрел ваш вариант и там так же он появляется если убрать выпадающее меню у пункта. Возможно как-то в рамках одного html+css сделать чтоб треугольник был только когда есть выпадающее меню? Или делать все равно придется через дополнительный класс и задавать его пунктам с подменю?

[Switch74]

в таком случае могу предложить такой вариант

http://jsfiddle.net/et9yg6v3/1/

[paralex]

в таком случае могу предложить такой вариант

http://jsfiddle.net/et9yg6v3/1/

круто! спасибо

[parnas]

Спасибо. Все работает. Можно делать так, чтобы при перемещении курсора меню исчезал не сразу, а через 0.3 секунда?

[Switch74]

http://jsfiddle.net/et9yg6v3/2/

[parnas]

Большое человеческое спасибо! Тема один из мастхев. В закладки однозначно!