Описание советы по играм на сайте.

Выпадающее меню на css

Выпадающее меню на css

Сегодня я расскажу о такой простой, но полезной вещи – выпадающем меню без использования javascript. Принцип работы прост как апельсин: пользователь мышку навел – показались дополнительные пункты меню (ага, и тебю тоже). В css для этого есть псевдокласс :hover, работающий во всех современных браузерах и даже в IE7 (IE6 понимает его только для ссылок).

Простой пример использования:

</p>
<style type="text/css">
p:hover a{display:none}
</style>
<p>
	Скачать пример ты можешь <a href="#">тут</a>.
</p>
<p>

Идем далее: задаем структуру меню. Самый простой и семантичный (как я не люблю это слово) способ – через ненумерованные списки. Это теперь так <ul> зовется. Для примера я накатал такую структуру:

</p>
<ul class="menu">
<li>
		<a href="#">text1</a></p>
<ul>
<li>
				<a href="#">text11</a></p>
<ul>
<li><a href="#">text111</a></li>
<li><a href="#">text112</a></li>
<li><a href="#">text113</a></li>
</ul>
</li>
<li>
				<a href="#">text12</a></p>
<ul>
<li><a href="#">text121</a></li>
<li><a href="#">text122</a></li>
<li><a href="#">text123</a></li>
</ul>
</li>
</ul>
</li>
<li>
		<a href="#">text2</a></p>
<ul>
<li><a href="#">text21</a></li>
<li>
				<a href="#">text22</a></p>
<ul>
<li><a href="#">text221</a></li>
<li><a href="#">text222</a></li>
<li><a href="#">text223</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">text3</a></li>
</ul>
<p>

У меня получилось три уровня вложенности. Могу поспорить, ты накатал около десяти. И обрати внимание: <ul> лежит рядом с <a>, а не внутри. Ну ладно, что делать дальше? А дальше в ход идет css.

<br />
ul.menu, ul.menu ul{list-style-type:none;margin:0;padding:0} /*сброс лишних стилей, чтоб не мешали*/<br />
ul.menu ul{display:none} /*скрываем списки от 2го уровня*/<br />
ul.menu li:hover > ul{display:block} /*показываем первый список внутри li, на который навели курсор*/<br />

Ок, основной механизм работает, только выглядит все криво. Сделаем так, чтобы пункты выскакивали вправо.

<br />
ul.menu{width:100px} /*ширина меню*/<br />
ul.menu ul{width:100%} /*ширина подменю относительно меню*/<br />
ul.menu li{position:relative} /*координаты подменю будем считать относительно родительского li*/<br />
ul.menu ul{position:absolute;top:0;left:100%} /*подменю &#8220;пристыковывается&#8221; справа*/<br />
ul.menu, ul.menu ul{background:#666} /*чтобы видеть и гордиться*/<br />

Если просуммируешь все вышенаписанное, получишь прикольную такую менюшку. Стилизация на твоей совести. Есть только несколько нюансов:

  1. Под IE6 вся эта красота не работает – он понимает :hover только для ссылок. Выход: :hover заменить на .hover и javascript’ом повесить обработчики наведения мыши/убирания мыши на элементы списка. Пример: $(‘ul.menu li’).mouseenter(function(){$(this).addClass(‘hover’);}).mouseleave(function(){$(this).removeClass(‘hover’);});.
  2. Если у тебя меню горизонтальное, придется постараться, чтобы подменю первого уровня (ul.menu ul) выскакивали вниз, а подменю следующих уровней (ul.menu ul ul) – в сторону.
  3. Если у тебя меню горизонтальное и доходит до края экрана, придется тебе пыхтеть, чтобы для последних пунктов подменю выпадали не вправо, а влево. Это можно сделать css-классом или javascript’ом.
  4. И если ты хочешь как-то обозначить пункты меню, у которых есть подпункты, придется им прописать класс. Можно сделать это javascript’ом: $(‘ul.menu ul’).parent().addClass(‘parent’);

Как бе и все. Скоро я создам страницу примеров и запощу сюда ссылку. Удачного сайтостроения!

[raw][/raw]

  1. Комментов пока нет

  1. Трэкбэков пока нет.

T_T O_O =| =D =/ =) =( ;) :twisted: :idea: :cool: :blush: :?: :!:
*