задержка выпадающего меню

[igornagorny89]

Помогите реализовать задержку выпадающего меню, скрипт на уровне копи паст, пытался реализовать через transition:delay, но почему то не работает!

[Q4Dizzy]

код выложи. а лучше на фидл.

[igornagorny89]

<ul class="main-menu clearfix">

    <li><a href="index.html">Начало</a></li>

    <li><a href="party.html">Афиша</a></li>

    <li><a href="menu.html">Меню</a>

    <ul class="sub-menu" id="sub-menu">

    <li><a href="restaraunt-menu.html">Ресторан</a></li>

    <li><a href="menu.html">Бар</a></li>

    </ul>

    </li>

    <li><a href="club.html">Клуб</a>

    <ul class="sub-menu">

    <li><a href="#">Терасса</a></li>

    </ul>

    </li>

    <li><a href="/">Корпоративы</a></li>

    <li><a href="contacts.html">Контакты</a></li>

  </ul>

 

 

 

 

css:

.main-menu {

display:block;

width:900px;

height:90px;

padding:0px;

text-align:center;

overflow:hidden;

margin:0px auto 0px auto;

}

.main-menu>li {

float:left;

list-style:none;

width:148px;

height:90px;

margin-right:2px;

}

.main-menu li:last-child {

border:none;

width:150px;

margin-right:0px;

}

.main-menu a {

position:relative;

display:block;

height:22px;

text-decoration:none;

padding:35px 0px;

color:rgba(255, 255, 255, 0.9);

background:radial-gradient(circle farthest-side at 73px 47px, rgba(0, 255, 255, 0.9 ) 10px, rgba(0, 77, 235, 0) 130%);

font-size:15px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}

.main-menu a:hover {

background:radial-gradient(circle farthest-side at 76px 47px, rgba(0, 142, 251, 1 ) 15px, rgba(0, 77, 235, 0) 125%);

color:#fff;

}

.main-menu .sub-menu{

position:absolute;

display:none;

margin:0px;

padding:0px;

text-align:center;

}

.main-menu .sub-menu li{

list-style:none;

width:148px;

height:40px;

    margin-bottom:2px;

}

.main-menu .sub-menu a{

display:block;

height:20px;

text-decoration:none;

padding:10px 0px;

color:rgba(255, 255, 255, 0.9);

background:radial-gradient(circle farthest-side at 73px 20px, rgba(0, 255, 255, 0.9 ) 10px, rgba(0, 77, 235, 0) 130%);

font-size:15px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}

.main-menu>li:hover .sub-menu{

}

.main-menu .sub-menu a:hover{

background:radial-gradient(circle farthest-side at 76px 47px, rgba(0, 142, 251, 1 ) 15px, rgba(0, 77, 235, 0) 125%);

color:#fff;

}

[Q4Dizzy]

Тебе нужно, чтобы плавно переключалось?

[igornagorny89]

ага, чтобы при наведении пункта меню - выпадал бар и ресторан плавно и так же плавно закрывалось, а то при только ховере мышь не успеваю на подпункты перевести сразу тухнет,

[Q4Dizzy]

http://jsfiddle.net/WWL7U/1/

display: none;display: block;

C с ними нельзя делать анимацию на CSS. тут подходит свойства Opacity, Visibility. а для самой задержки - transition-duration.

 

P.S Анимация на CSS не будет работать в ИЕ 9 и ниже. Там уже пользуйся JS.

Edited April 5, 2014 by Q4Dizzy

[igornagorny89]

спасибо большое, а вопрос, как же тогда скрывать под меню без дисплей ноне ? вместо этого Opacity, Visibility,  transition-duration в эту часть?

main-menu .sub-menu a{

display:block;

height:20px;

text-decoration:none;

padding:10px 0px;

color:rgba(255, 255, 255, 0.9);

background:radial-gradient(circle farthest-side at 73px 20px, rgba(0, 255, 255, 0.9 ) 10px, rgba(0, 77, 235, 0) 130%);

font-size:15px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}

[Q4Dizzy]

кстати.. уберите transition-duration тут. забыл убрать. тогда не будет задержки ненужной.

.main-menu a {position:relative;display:block;height:22px;text-decoration:none;padding:35px 0px;color:rgba(255, 255, 255, 0.9);background:radial-gradient(circle farthest-side at 73px 47px, rgba(0, 255, 255, 0.9 ) 10px, rgba(0, 77, 235, 0) 130%);font-size:15px;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    transition-duration: 2s;}

Дисплей ноне скрывает элемент резко, причём извлекая из потока элементов. Сочетания opacity, visibility и position: absolute делают то же самое, но к ним можно прикрепить анимацию CSS, чего нельзя сделать с дисплей ноне.

Edited April 5, 2014 by Q4Dizzy

[igornagorny89]

ясно, спасибо большое )) пис

[igornagorny89]

еще раз спасибо все понял все работает, единственное не понимаю зачем opacity, оно и без него только с визабилити скрывает и показывает!!

[Q4Dizzy]

Для самой анимации, насколько я знаю. Opacity - как бы указатель для самой анимации.

[igornagorny89]

ясно спасибо)

[kattiperk]

ясно спасибо)

 а это твоё решение с задержкой?

 

обычно так пользователю кажется, что сайт подтормаживает. чисто на психологическом уровне.

это юзабилити касается.

красота, кончено, непомерная, но я бы так не делала.

[igornagorny89]

 а как же тогда?)

[kattiperk]

Обычное меню, без задержек с появлением.

Ну или минимальную, если хочется плавно.

 

Хотя не мне ж решать