раскрывающееся меню jquery

Еще несколько публикаций, категории jQuery:

Источник материала При копировании информации, ссылка на сайт-источник обязательна!

Использую: HTML, CSS, JavaScript (jQuery), PHP (ZF2), MySQL, MongoDB, Debian GNU/Linux, Windows 8.

Руководитель проекта. Студент математического факультета Специализация: Front-end, Back-end.

Здравствуйте, сегодня посмотрим, как создать простое выпадающее меню с CSS, HTML и jQuery. Этот урок очень простой в плане jQuery и CSS реализации, а так же имеет малое количество строк кода. HTML Код: html <div class="dropdown"> <a class="account">Мой аккаунт</a> <div class="submenu"> <ul class="root"> <li><a href="#Profile">Профиль</a></li> <li><a href="#settings">Настройки</a></li> <li><a href="#feedback">Обратная связь</a></li> </ul> </div> </div> JavaScript Код: html <!-- Подключаем библиотеку jQuery--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> //Когда страница загрузилась, выполняем... $(document).ready(function() { //Обработка события клика по элементу с классом account $(".account").click(function() { //Получаем значение атрибута data-active текущего элемента //(data-active - флаг, отвечающий за отображение выпадающего списка) var active = $(this).attr('data-active'); // Подробнее о функции .attr(), здесь: // http://jquery.page2page.ru/index.php5/Работа_с_атрибутами //Если меню было активно, сворачиваем if(active == 1) { $(".submenu").hide(); $(this).attr('data-active', '0'); } //Если было свернуто, разварачиваем else { $(".submenu").show(); $(this).attr('data-active', '1'); } }); //Возвращение кнопки мыши в ненажатое состояние: //для выпадающего списка $(".submenu").mouseup(function() { return false }); //для кнопки $(".account").mouseup(function() { return false }); //для всей страницы $(document).mouseup(function() { $(".submenu").hide(); $(".account").attr('data-active', ''); }); // Подробнее о функции .mouseup(), здесь: // http://jquery.page2page.ru/index.php5/Обработчик_или_источник_события_mouseup }); </script> CSS Код: css .dropdown { color: #555; margin: 3px -22px 0 0; width: 143px; position: relative; height: 17px; text-align:left; } .submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .dropdown li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration:none; } .dropdown li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; background: url(icons/arrow.png) 116px 17px no-repeat; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede; } На этом все, до новых встреч!

Простое выпадающее меню с jQuery и CSS

Простое выпадающее меню с jQuery и CSS

Простое выпадающее меню с jQuery и CSS - WCoders.com