Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow JQuery для чайников arrow JQuery для чайников. Урок 5. Всплывающее меню
25.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
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 г. )
 
Пред. »
Вернуться
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги