Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Drop-Down (выпадающее) меню.
Одна из самых распространенных реализаций меню для сайта это горизонтальное выпадающее меню. При подводе курсора мышки к какому-то узлу дерева этот узел будет раскрываться, при отводе закрывается (так называемое вплывающее меню). Работа этого эффекта заключается в функции hover - она вешает на объект два обработчика события: один при наведении курсора мыши, второй на отведение.
Рисунок 17 – элементы drop-down меню
Код программы: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Drop-Down меню.</title> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript"> $(document).ready(function(){ //добавление обработчика для события hover для элементов li: $('.topmenu ul li').hover( function() { //отображаем под-меню: // изменяем фон выбранного элемента путем добавления класса active $(this).addClass("active"); $(this).find('ul').stop(true, true);// останавливаем всю текущую анимацию // находим элемент ul и вызываем анимацию slideDown $(this).find('ul').slideDown(); }, function() { $(this).removeClass("active"); $(this).find('ul').slideUp('slow'); } ); });
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Только показывает выпадающий триггер, когда js включен - добавляет пустой тег span после ul.subnav
$("ul.topnav li span").click(function() { //Когда триггер нажат...
//Следующие события применяются к самой subnav (перемещение subnav вверх и вниз) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Выпадение subnav вниз при нажатии
$(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up });
//Следующие события применяются к триггеру (Событие hover для триггера) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "sub-hover" });
}); </script>
<style type="text/css"> body { margin: 0 auto; padding: 0; width: 520px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } .topmenu ul,.topmenu ul li{ margin: 0; padding: 0; display: inline; margin-right:2px; } .topmenu ul li { float: left; position:relative; width:140px; } .topmenu ul li a{ display: block; padding:10px 10px 10px 30px;
margin:1px 0px; color: #0000FF; text-decoration: none; border:1px solid #999; background: url('images/window.gif') no-repeat 10px center; white-space: nowrap; } .topmenu ul li a:HOVER{ color: #0000CC; }
.topmenu ul li ul { display: none; position:absolute; top:36px; }
.topmenu ul li ul li { display:block; border-top:0px; } .active {
background-color:#eee; } </style> </head> <body> <div class="topmenu"> <ul> <li><a href="#" title="Меню 1">Меню 1</a> <ul> <li><a href="#" title="Элемент 1.1">Элемент 1.1</a></li> <li><a href="#" title="Элемент 1.2">Элемент 1.2</a></li> <li><a href="#" title="Элемент 1.3">Элемент 1.3</a></li> </ul> </li> <li class="drop"><a href="#" title="Меню 2">Меню 2</a> <ul> <li><a href="#" title="Элемент 2.1">Элемент 2.1</a></li> <li><a href="#" title="Элемент 2.2">Элемент 2.2</a></li> <li><a href="#" title="Элемент 2.3">Элемент 2.3</a></li> </ul> </li> <li class="drop"><a href="#" title="Меню 3">Меню 3</a> <ul> <li><a href="#" title="Элемент 3.1">Элемент 3.1</a></li> <li><a href="#" title="Элемент 3.2">Элемент 3.2</a></li> <li><a href="#" title="Элемент 3.3">Элемент 3.3</a></li> </ul> </li> </ul> </div> </body> </html>
Результат:
Рисунок 18 – демонстрация работы меню
|
|||||
|
|
Последнее изменение этой страницы: 2016-12-28; просмотров: 242; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.144.251.72 (0.006 с.) |
