JQuery для чайников. Урок 5. Всплывающее меню
Это последний урок из серии "JQuery для чайников", публикуемый в бесплатном разделе. Начиная со следующего, публикация уроков будет продолжена в платном разделе. В бесплатном же разделе иногда будут публиковать некоторые статьи, посвященные методике программирования под JQuery .
Исходники к уроку можно скачать здесь.
Сегодня мы рассмотрим очень интересный эффект - при подводе курсора мышки к какому то узлу дерева этот узел будет раскрываться, при отводе закрывается (так называемое вплывающее):
А вот исходник примера, который вы видите на скриншоте:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery. Пример</title> <script type='text/javascript' src='jquery.js'></script> <style type="text/css"> #Menu { list-style:none; } ul,li { color:green; list-style:none; text-decoration:none; list-style:none; } </style> </head>
<body> <ul id="Menu"> <li><span id="SpanMenu">Каталог товаров</span> <ul class="MenuItem" id="Catalog"> <li> <a href="1">Пакеты упаковочные</a> <ul class="SubMenuItem"> <li> <a href="6">толстые без складки</a> </li> <li> <a href="7">толстые в рулонах</a> </li> </ul> </li> <li> <a href="2">Одноразовая посуда </a> <ul class="SubMenuItem"> <li> <a href="10">Стаканы одноразовые</a> </li> <li> <a href="11">Тарелки пластиковые</a> </li> <li> <a href="8">Тарелки картонные</a> </li> <li> <a href="9">Барные принадлежности</a> </li> </ul> </li> <li> <a href="3">Хозяйственный инвентарь</a> <ul class="SubMenuItem"> <li> <a href="12">Ведра</a> </li> <li> <a href="13">Швабры</a> </li> </ul> </li> <li> <a href="4">Садовый инвентарь</a> <ul class="SubMenuItem"> <li> <a href="14">Лопаты</a> </li> <li> <a href="15">Грабли</a> </li> </ul> </li> <li> <a href="5">Лаки, краски</a> <ul class="SubMenuItem"> <li> <a href="16">Лаки</a> </li> <li> <a href="17">Автоэмали</a> </li> </ul> </li> </ul> </li> </ul>
<script type="text/javascript"> $(document).ready(function(){ $(".SubMenuItem").hide(); $("#Menu ul li").hover(function() { $(this).find('ul').show(); }, function() { $(this).find('ul').hide(); }) }); </script> </body> </html> |
Работа этого эффекта заключается в функции hover - она вешает на объект два обработчика события: один при наведении курсора мыши, второй на отведение