Прототип меню

Titansword · August 2, 2011

Сперва объясню задумку. При наведении на верхний .elem из под #grey_box выдвигается .back с такими же .elem. .elem имеют событие :hover. Конструкция резиновая.

#grey_box {
height: 50px;
background: #ddd;
padding-top:10px;
}

 table {
 margin-left:300px;
 }
.back{
padding-top:30px;
background:orange;
position:relative;
z-index:-1;
}
.elem{
background:blue;
}
.elem:hover{
background-color:yellow;
}

<!DOCTYPE HTML>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css.css">
	</head>
	<body>
		<div id="grey_box">
			<table>
				<tr>
					<td>
						<div class="elem">menu item</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="back">
							<div class="elem">content</div>
							<br>
							<div class="elem">content</div>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Проблема в том, что при назначении .back z-index:-1 у расположенных в нем .elem перестает работать событие :hover. В лисе и хроме- совсем, а осле и опере- глючно. Можно, конечно обойтись и без z-index,но в оригинале .back имеет скругленные углы и тень, а значит придется нарезать картинки и оформлять всё в таблицу, а это ну уж очень громоздко.

Надеюсь местные знатоки подскажут более элегантное решение проблемы.

ruslan.savenok · August 2, 2011

Titansword, зачем придумывать "велосипед с квадратными колесами"?

Почитай о выпадающих меню http://www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/

Softlink · August 2, 2011

Получается вам надо сделать выпадающее меню или что? Три раза прочитал, но так и не понял до конца.

Titansword · August 2, 2011

Titansword, зачем придумывать "велосипед с квадратными колесами"?
Почитай о выпадающих меню http://www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/

Затем, что мне нужна именно такая модель велосипеда, вот только колеса круглыми не получается сделать

Из видимых мной готовых решений, ни одно меню не подошло.

Получается вам надо сделать выпадающее меню или что? Три раза прочитал, но так и не понял до конца.

По сути да, это можно назвать меню. Вся проблема в том, что у выпадающего списка не работает событие hover.

sigma77 · August 2, 2011

Titansword,

td:hover .elem {

}

ruslan.savenok · August 2, 2011

Из видимых мной готовых решений, ни одно меню не подошло.

Как не подошло? Вам нужно сделать структуру ul > li это будет семантично, а выпадающее меню любой сложности, в том числе и ваше можно написать очень просто.

Опишите пожалуйста что именно вам не подходит в конструкции ul > li

Titansword,
td:hover .elem {

} 

+IE6 fix

sigma77 · August 2, 2011

+IE6 fix

IE6 must die

Titansword · August 2, 2011

Titansword,
td:hover .elem {
} 

В этом случае,увы, событие сработает сразу на все .elem.

Как не подошло? Вам нужно сделать структуру ul > li это будет семантично, а выпадающее меню любой сложности, в том числе и ваше можно написать очень просто.
Опишите пожалуйста что именно вам не подходит в конструкции ul > li

Так дело, то не в структуре ul > li таблиц или дивов. Проблема в том, что для достижения определенного эффекта я использую для выпадающего меню z-index:-1, а в этом случае для его элементов не срабатвают события.

ruslan.savenok · August 2, 2011

Titansword, у вас есть картинка готового результата? Давайте я напишу вам код

+IE6 fix
IE6 must die

Вы это моим клиентам скажите

sigma77 · August 2, 2011

В этом случае,увы, событие сработает сразу на все .elem.

Ну так вы сами засунули .back под ячейку.

Так дело, то не в структуре ul > li таблиц или дивов. Проблема в том, что для достижения определенного эффекта я использую для выпадающего меню z-index:-1, а в этом случае для его элементов не срабатвают события.

Может если вы внятно объясните зачем вам так нужен z-index: -1 и что в конечном итоге нужно получить, то и предложить можно будет что-то более конкретное.

Titansword · August 2, 2011

Выкладываю конечный результат для наглядности.

При наведении на верхний "привет" выезжает блок с такими же "приветами". z-index:-1; нужен, что бы блок находился позади главной панели.

Edited August 2, 2011 by Titansword

ruslan.savenok · August 2, 2011

Выкладываю конечный результат для наглядности.
При наведении на верхний "привет" выезжает блок с такими же "приветами". z-index:-1; нужен, что бы блок находился позади главной панели.

savenok - собака - csshero.ru дайте PSD

Edited August 2, 2011 by ruslan.savenok

ruslan.savenok · August 2, 2011

Titansword, тут так просто не выйдет т.к. нам надо вытягивать ul > li > ul с ul > li да бы залезть под него, но можно в данном случае использовать обертку либо a и поставить на нее фон полупрозрачного бордюра, тогда он перекроет ul > li > ul.

P.S. Интересная задача, хочу это сверстать, пришлите мне макет

Titansword · August 2, 2011

Titansword, тут так просто не выйдет т.к. нам надо вытягивать ul > li > ul с ul > li да бы залезть под него, но можно в данном случае использовать обертку либо a и поставить на нее фон полупрозрачного бордюра, тогда он перекроет ul > li > ul.
P.S. Интересная задача, хочу это сверстать, пришлите мне макет

Выслал.

psywalker · August 2, 2011

Выкладываю конечный результат для наглядности.
При наведении на верхний "привет" выезжает блок с такими же "приветами". z-index:-1; нужен, что бы блок находился позади главной панели.

Вот эту часть верхнего меню, т.е. пункт сам, вместе с бордером нижним, накладываешь сверху http://screencast.com/t/IWOYTrha

А выпадающее будет под ним. И не нужно никаких z-index:-1;

Но это как вариант, а ещё можно попробовать по хитрее сделать.

Вот эту полоску с тенью (как у основного меню) http://screencast.com/t/jFzrt54rS мы прибиваем сверху абсолютом к блоку с выпадающим меню, т.е. с его контейнером. Это не основной LI, а именно отдельный блок. Он сам лежит в LI и из него уже выпадает меню. В общем при нажатии этот блок появляется, а эта полоска сверху эмулирует нижнюю тень у основного меню.

Titansword · August 2, 2011

psywalkerВерхние пункты меню динамически изменяются по ширине и от их ширины зависит ширина впадающего меню + впадающее меню нужно позиционировать по центру верхнего пункта. Не представлю как этого можно добиться не помещая их в одну таблицу.

Но это как вариант, а ещё можно попробовать по хитрее сделать.
Вот эту полоску с тенью (как у основного меню) http://screencast.com/t/jFzrt54rS мы прибиваем сверху абсолютом к блоку с выпадающим меню, т.е. с его контейнером. Это не основной LI, а именно отдельный блок. Он сам лежит в LI и из него уже выпадает меню. В общем при нажатии этот блок появляется, а эта полоска сверху эмулирует нижнюю тень у основного меню.

Это как раз был мой план "B" Но все планы спутала box-shadow у впадающего элемента. Тень сверху наползает на панель.

Edited August 2, 2011 by Titansword

psywalker · August 2, 2011

psywalkerВерхние пункты меню динамически изменяются по ширине и от их ширины зависит ширина впадающего меню + впадающее меню нужно позиционировать по центру верхнего пункта. Не представлю как этого можно добиться не помещая их в одну таблицу.

Но ведь ты, я так понял, задействуешь JS?

И что значит по центру верхнего пункта? Ведь ты же сказал, что выпадающие будет по ширине, такое же, как и верхний пункт?

Titansword · August 2, 2011

И что значит по центру верхнего пункта? Ведь ты же сказал, что выпадающие будет по ширине, такое же, как и верхний пункт?

Да, но хотелось бы не городить огород еще и там, а обойтись только кодом для выезжающего элемента.

И что значит по центру верхнего пункта? Ведь ты же сказал, что выпадающие будет по ширине, такое же, как и верхний пункт?

Тут уж я ступил :facepalmxd: Одно из двух, либо делать одинаковую ширину, либо если выпадающие меню будет уже, выровнять его по центру верхнего пункта. Что легче реализовать, то и использую, разницы в принципе никакой.

Edited August 2, 2011 by Titansword

psywalker · August 2, 2011

Тут уж я ступил Одно из двух, либо делать одинаковую ширину.

А в чём проблема? Почему нельзя растянуть абсолют-ное выпадающее меню на 100% контейнера LI?

ruslan.savenok · August 2, 2011

Вот быстро сделал набросок, далее думаю у Вас проблем со стилизацией не будет dpdn.zip

Sign In

Прототип меню

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information