Программирование - это просто
Advertisement
Главная arrow Уроки программирования arrow JQuery для чайников arrow JQuery для чайников. Урок 5. Всплывающее меню
19.02.2026 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
JQuery для чайников. Урок 5. Всплывающее меню Печать E-mail
Автор megabax   
31.01.2013 г.
Структура программы на примере простейшей программы

JQuery для чайников. Урок 5. Всплывающее меню

Это последний урок из серии "JQuery для чайников", публикуемый в бесплатном разделе. Начиная со следующего, публикация уроков будет продолжена в платном разделе. В бесплатном же разделе иногда будут публиковать некоторые статьи, посвященные методике программирования под JQuery .

Исходники к уроку можно скачать здесь.

Сегодня мы рассмотрим очень интересный эффект - при подводе курсора мышки к какому то узлу дерева этот узел будет раскрываться, при отводе закрывается (так называемое вплывающее):

JQuery для чайников. Урок 5. Всплывающее меню

А вот исходник примера, который вы видите на скриншоте:

<!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 - она вешает на объект два обработчика события: один при наведении курсора мыши, второй на отведение
Последнее обновление ( 31.01.2013 г. )
 
Пред. »
Вернуться
 
© 2026 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги