— заметки разработчиков студии

Всплывающее меню — это отличное решение для построения полноценной навигации с различными уровнями вложенности, которое зарекомендовало себя еще лет 10 назад. При разработке сайтов в нашей студии мы также используем этот прием для реализации удобного перемещения по разделам веб-ресурса: medprem.ru, okphoto.ru.
Сегодня я хочу предложить вашему вниманию готовый способ реализации горизонтального и вертикального всплывающего меню с помощью javascript и css.

При проектировании сайтов с флеш-роликами зачастую нам бывает необходимо интегрировать html-элементы с flash.
Как-то раз я занимался разработкой интернет-представительства компании, занимающейся съемкой и монтированием видео. Сайт включал в себя флеш-элемент с навигацией по сайту и изображением телевизора, в котором воспроизводилось видео. Ниже была лента новостей, где публиковались записи о новых снятых видео, и заказчик попросил меня, чтобы при клике на новость в телевизоре воспроизводился соответствующий видео-ролик.
Оказывается обращаться к flash средствами javascript не так уж сложно.

С появлением фреймворков, таких как: jquery, mootools, prototype — работать с ajax стало намного проще. Ваши аякс-запросы будут работать во всех браузерах, а для вызова нужной функции достаточно написать пару строчек кода.

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

< ?xml version='1.0'?>
<response>
<id>1</id>
<price>< ![CDATA[<font class='price'>2460 руб.]]></price>
<id>2</id>
<price>< ![CDATA[<font class='price'>3500 руб.]]></price>
<id>3</id>
<price>< ![CDATA[<font class='price'>5000 руб.]]></price>
</response>

При размещении на странице флэш-роликов браузер зачастую блокирует его. Для разблокировки элемента требуется навести курсор на флэш-ролик и щелкнуть по нему. В таком случае, при реализации меню на флэше пользователю придется 2 раза щелкать по разделу чтобы попасть туда.

Но не расстраивайтесь — выход есть. При помощи javascript эту проблему можно легко и просто решить.

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>

Ну думаю здесь все понятно.
Исходник можно скачать здесь