Выпадающее меню с помощь списка определений

Lisitsa · April 8, 2011

Здравствуйте! Я задалась вопросом как сделать выпадающее меню не с помощью вложенных списков, а используя список определений. Только он, зараза, не хочет выпадать. Собственно говоря, в этом и проблема. Буду рада помощи.

Код CSS:


body{
font-family: Georgia, Times, 'Times New Roman', serif;
}
#nav, #nav dl{
	margin:0;
	padding:0;
	border: 1px solid #000;
	background: #515151;
	float: left;
	width:auto;
}
#nav dt{
	float:left;
	position:relative;
	background: #515151;
}
#nav dd{
	display:none;
	position:absolute;
	padding:8px 0;
	width:138px;
	background: #515151;
}

#nav a{
	color:#fff;
	text-decoration:none;
	display:block;
	width:120px;
	padding:4px 10px;
}
#nav a:hover{
	color:#000;
	background:#ccc;
}
#nav dt:hover{
	background:#333;
}
#nav dt:hover dd{
	display:block;
}

Код HTML:


	<dl id="nav">
		<dt><a href="#">Products</a></dt>
			<dd><a href="#">Product 1</a></dd>
			<dd><a href="#">Product 2</a></dd>
			<dd><a href="#">Product 3</a></dd>
			<dd><a href="#">Product 4</a></dd>
			<dd><a href="#">Product 5</a></dd>
		<dt><a href="#">Solutions</a></dt>
			<dd><a href="#">Solution 1</a></dd>
			<dd><a href="#">Solution 2</a></dd>
			<dd><a href="#">Solution 3</a></dd>
			<dd><a href="#">Solution 4</a></dd>
			<dd><a href="#">Solution 5</a></dd>
		<dt><a href="#">Learning</a></dt>
			<dd><a href="#">Learning 1</a></dd>
			<dd><a href="#">Learning 2</a></dd>
			<dd><a href="#">Learning 3</a></dd>
		<dt><a href="#">Help</a></dt>
		<dt><a href="#">Downloads</a></dt>
			<dd><a href="#">Download 1</a></dd>
			<dd><a href="#">Download 2</a></dd>
			<dd><a href="#">Download 3</a></dd>
			<dd><a href="#">Download 4</a></dd>
			<dd><a href="#">Download 5</a></dd>
		<dt><a href="#">Company</a></dt>
			<dd><a href="#">Company 1</a></dd>
			<dd><a href="#">Company 2</a></dd>
		<dt><a href="#">Store</a></dt>
			<dd><a href="#">Store 1</a></dd>
			<dd><a href="#">Store 2</a></dd>
			<dd><a href="#">Store 3</a></dd>
	</dl>

Я новичок, если где-то есть косяки, не ругайтесь

Заранее большое спасибо.

swetlana · April 8, 2011

Вопрос один: зачем?

Lisitsa · April 8, 2011

Потому что хочется разобраться.

Быколай · April 8, 2011

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

Edited April 8, 2011 by Быколай

SelenIT · April 8, 2011

не с помощью вложенных списков

Вот потому

#nav dt:hover dd

и не хочет выпадать, что не вложенный. См. соседние селекторы.

Lisitsa · April 8, 2011

Вот потому и не хочет выпадать, что не вложенный. См. соседние селекторы.

Спасибо. Только у меня все равно ничего не получается..

SelenIT · April 8, 2011

Да, с такой структурой будет сложно добиться результата без скрипта. Куча абсолютно позиционированных dd-шек без координат будут накладываться друг на дружку в уголке, соседним селектором легко можно выбрать только одну, для остальных придется городить длинные цепочки. И в итоге получится что-то типа такого:

body{
font-family: Georgia, Times, 'Times New Roman', serif;
}
#nav, #nav dl{
        margin:0;
        padding:0;
        border: 1px solid #000;
        background: #515151;
        float: left;
        width:auto;
}
#nav dt{
        float:left;
        position:relative;
        background: #515151;
}
#nav dd{
        display:none;
        position:absolute;
        padding:8px 0;
        width:138px;
        background: #515151;
}

#nav a{
        color:#fff;
        text-decoration:none;
        display:block;
        width:120px;
        padding:4px 10px;
}
#nav a:hover{
        color:#000;
        background:#ccc;
}
#nav dt:hover{
        background:#333;
}
/* заставим отображаться до 5 dd-шек подряд после наведенной dt-шки */
#nav dt:hover + dd,
#nav dt:hover + dd + dd,
#nav dt:hover + dd + dd + dd,
#nav dt:hover + dd + dd + dd + dd,
#nav dt:hover + dd + dd + dd + dd + dd {
        display:block;
}
/* зададим каждой dd-шке y-координату в зависимости от номера */
#nav dt:hover + dd {
	top: 36px;
}
#nav dt:hover + dd + dd {
	top: 80px;
}
#nav dt:hover + dd + dd + dd {
	top: 124px;
}
#nav dt:hover + dd + dd + dd + dd {
	top: 168px;
}
#nav dt:hover + dd + dd + dd + dd + dd  {
	top: 212px;
}
/* а теперь еще каждой группе dd-шек нужно задать x-координату... */
/* для первой можно не задавать, пусть будет 0 по умолчанию */
/* для второй еще относительно просто... */
#nav dd + dt:hover + dd,
#nav dd + dt:hover + dd + dd,
#nav dd + dt:hover + dd + dd + dd,
#nav dd + dt:hover + dd + dd + dd + dd,
#nav dd + dt:hover + dd + dd + dd + dd + dd {
        left: 140px;
}
/* а вот начиная с третьей начинается ужас... */
#nav dd + dt + dd + dd + dd + dd + dd + dt:hover + dd,
#nav dd + dt + dd + dd + dd + dd + dd + dt:hover + dd + dd,
#nav dd + dt + dd + dd + dd + dd + dd + dt:hover + dd + dd + dd,
#nav dd + dt + dd + dd + dd + dd + dd + dt:hover + dd + dd + dd + dd,
#nav dd + dt + dd + dd + dd + dd + dd + dt:hover + dd + dd + dd + dd + dd {
        left: 280px;
}
/* для пятой надо еще учесть, что четвертая была пустой...
   кстати, по смыслу dl получается, что Download 1 -
   определение, подходящее не только к Downloads, но и к Help,
   это действительно так?  */
#nav dd + dt + dd + dd + dd + dd + dd + dt + dd + dd + dd + dt + dt:hover + dd,
#nav dd + dt + dd + dd + dd + dd + dd + dt + dd + dd + dd + dt + dt:hover + dd + dd,
#nav dd + dt + dd + dd + dd + dd + dd + dt + dd + dd + dd + dt + dt:hover + dd + dd + dd,
#nav dd + dt + dd + dd + dd + dd + dd + dt + dd + dd + dd + dt + dt:hover + dd + dd + dd + dd,
#nav dd + dt + dd + dd + dd + dd + dd + dt + dd + dd + dd + dt + dt:hover + dd + dd + dd + dd + dd {
        left: 560px;
}
/* к счастью, в CSS3 есть способ слегка облегчить наши мучения,
   но это не будет работать в IE7-8 */
#nav dt:nth-of-type(6):hover + dd,
#nav dt:nth-of-type(6):hover + dd + dd,
#nav dt:nth-of-type(6):hover + dd + dd + dd,
#nav dt:nth-of-type(6):hover + dd + dd + dd + dd,
#nav dt:nth-of-type(6):hover + dd + dd + dd + dd + dd {
        left: 700px;
}
#nav dt:nth-of-type(7):hover + dd,
#nav dt:nth-of-type(7):hover + dd + dd,
#nav dt:nth-of-type(7):hover + dd + dd + dd,
#nav dt:nth-of-type(7):hover + dd + dd + dd + dd,
#nav dt:nth-of-type(7):hover + dd + dd + dd + dd + dd {
        left: 840px;
}

И самое обидное: при уводе с dt, все эти dd-шки будут тут же прятаться, потому что соответствующий им dt перестанет быть :hover. Т.е. всё равно получится не меню, а в лучшем случае всплывающая подсказка.

Надеюсь, теперь вам понятнее, почему вас с самого начала отговаривали от этой затеи?

Быколай · April 8, 2011

SelenIT, +1 жесть

Lisitsa · April 8, 2011

SelenIT, вот это вообще жесть-жесть!

Я уже к чему-то подобному сама начала приходить, но до Вас мне далеко было! Спасибо за труд!

Да, теперь однозначно дорогу вложенным спискам :)

Я Вами восхищаюсь!!

Edited April 8, 2011 by Lisitsa

Sign In

Выпадающее меню с помощь списка определений

Question

Lisitsa

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

Lisitsa

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Lisitsa

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

Lisitsa

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information