Задержка для выпадающего меню
PETSEE.NET
Все закладки
IT-технологии
Автомобили
Бизнес и финансы
Графика
Животные
Кулинария
Лингвистика
Медицина
Мотоциклы
Музыка
Растения
Спорт
Юмор
Прочее
Основное Разделы Дополнения Участникам
Задержка для выпадающего меню
Реклама
 
Проверь свои знания :-)
Ранг:Без мыслей
Статус ответа:Думаю...
Рейтинг знаний:0
Имя участника:
Где рыба?

Задержка для выпадающего меню

Задержка для выпадающего меню средствами CSS


На примере ниже сделал один пункт меню с классом CSS .menu и один выпадающий для
него блок с классом CSS .vipad
Задержка осуществляется с помощью свойства CSS: transition-delay
Можно скопировать код на страницу и посмотреть как работает:

================HTML code===================

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Andrey" />

<title>Задержка для выпадающего меню средствами CSS</title>
</head>

<body>

<style>
.menu{
position: relative;
width: 300px;
padding: 0px 20px;
text-align: center;
color: #ffffff;
line-height: 30px;
background: blue;
}
.menu .vipad {
visibility: hidden;
position: absolute;
top: 30px;
left: 0px;
right: 0px;
background: green;
}

.menu:hover .vipad, .menu .vipad:hover {
visibility: visible;
/*Firefox*/
-moz-transition-property:visibility;
-moz-transition-duration:60ms;
-moz-transition-delay: 0.5s;
/*Opera*/
-o-transition-property:visibility;
-o-transition-duration:60ms;
-o-transition-delay: 0.5s;

03.04.2013 / Андрей / Рейтинг: 10.00 (1 голосов) 

<<<
<
1
2
3
4
5
6
7
8
9
10
11
>
>>>
Всего страниц: 2
Комментарии:
Добавить комментарий
Ваше имя:
Введите код:
Текст комментария:
Защищено www.petsee.net
2009 — 2017