Заметки PHP

Рассмотрим пример на основе сайта http://ekalady.ru

Основная цель — сделать спадающее верхнее меню с помощью JavaScript Framework jQuery.

Думать не будем, будем рассматривать код:

<style type=”css/text”>
div.top_menu {
	display: none;
	width:auto;
	height: auto;
	left: 100px;
	top: 100px;
	position: absolute;
	border: 2px solid #662010;
	background: #521000;
	padding: 4px;
	white-space: nowrap;
	text-align: left;
}
div.top_menu a, div.top_menu div {
	color: #C0A287;
	white-space: nowrap;
	}
</style>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
	<tbody>
		<tr class="top_menu_cont">
			<td width="50">
				<a href="/kuhnya/recipe/"><img height="38" border="0" width="50" src="ekalady_03.png"/></a>
				<div class="top_menu">
					<div><a href="/kuhnya/recipe/">Рецепты</a></div>
					<div><a href="/kuhnya/spice/">Специи и пряности</a></div>
					<div><a href="/kuhnya/what/">Подбор рецептов</a></div>
					<div><a href="/kuhnya/kaloriinost_produktov/">Калории</a></div>
					<div><a href="/kuhnya/secrets/">Секреты кухни</a></div>
					<div><a href="/kuhnya/diety/">Диеты</a></div>
					<div><a href="/kuhnya/etable/">Пищевые добавки</a></div>
					<div><a href="/kuhnya/etable4673/">Мобильный E справочник</a></div>
					<div><a href="/kuhnya/vitamins/">Витамины и минералы</a></div>
				</div>
			</td>
			<td width="67">
				<a href="/mybaby/"><img height="38" border="0" width="67" src="ekalady_05.png"/></a>
				<div class="top_menu">
					<div><a href="/mybaby/table/">Мальчик или девочка</a></div>
					<div><a href="/mybaby/opredelit_pol/">Определить пол</a></div>
					<div><a href="/mybaby/rodilnye_doma/">Родильные дома</a></div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

Пусть у нас меню будет только из 2х родительских разделов, в которых есть «n-ое» кол-во «детей» меню, т.е. подразделы.

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

Насколько нам известен «jQuery» он работает с деревом DOM объектов в упрощенной для программиста форме общения. Т.е. мы можем почти на «русском» языке, сказать, что мы хотим взять и что с ним сделать.

А нужно нам следующее:

Взять объект с классом «tom_menu_cont»
Внутри него найти все TD объекты
Каждому найденному объекту присвоить событие наведение мышки
Если уже какое-то меню было открыто — закрываем его
Ищем все контейнеры подразделов с классом «top_menu»
Устанавливаем стили для показа списка подразделов
Показываем подразделы
Запоминаем, какой именно пункт меню развернуть, т.е. запоминаем контейнер подразделов
Для того, что бы закрывать меню, когда выбрали что-то или когда оно не нужно, говорим «documentу» что при клике по любой области сайта, надо закрыть активное меню

Ну вот, алгоритм описали, давайте посмотрим на код:

//Последнее открытое меню, по умолчанию - ничего
var last_menu = null;
// Перебираем все пункты меню (основные)
$('.top_menu_cont > td').each(function()
{
 	// Каждому найденному контейнеру TD присваиваем обработчик событий
$(this).mouseover(function() {
// Если какое-то меню уже было открыто и не закрыто все еще - закрываем
if (last_menu)
{
// Закрываем открытое меню
last_menu.hide();
}
	// Определяем новое открытое меню, т.е. контейнер пунктов меню подразделов
last_menu =$(this).find('.top_menu');
	// Определяем стили: позиционируем относительно объекта-родителя, по которому
	// мы кликнули, устанавливаем выравнивания и показываем подменю.
last_menu.css({left:$(this).offset().left,top:$(this).offset().top+$(this).height()+3}).show()
});
)
// Определяем глобальный обработчик событий для всего документа
$(document).click(function() {
	// Если подменю открыто
if (last_menu)
{
// Закрываем его
last_menu.hide();
}
});

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

Сделай сам, Статьи dynamic menu, javascript, jquery, menu