Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

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; просмотров: 274; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.119.106.176 (0.005 с.)