Что расширяет эти поднавы?

Question

Я смотрю http://voky.com.ua/showcase/sky-mega-menu/examples/demo-personal.html, и я не могу понять, что делает расширение subnavs. Например, наведите указатель мыши на «Портфолио» и посмотрите, как расширяется subnav. Я проверил все элементы вокруг элементов nav, и я не могу найти CSS3 transition, и я также не вижу Javascript, добавляющего любые атрибуты style к элементам или добавление каких-либо классов.

Answer 1

Это две части;

Расширяющийся эффект достигаются путем установки scale свойства (0,0) когда меню закрыто, а затем (1,1), когда его видимый, и имеющий transition свойства для синхронизации оживляющей. Вот соответствующие строки;

/* line 60 */ 
.sky-mega-menu li > div { 
    ... 
    -o-transition: -o-transform 0.4s, opacity 0.4s; 
    -ms-transition: -ms-transform 0.4s, opacity 0.4s; 
    -moz-transition: -moz-transform 0.4s, opacity 0.4s; 
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; 
} 

/* line 374 */ 
.sky-mega-menu-anim-scale li > div { 
    -o-transform: scale(0, 0); 
    -ms-transform: scale(0, 0); 
    -moz-transform: scale(0, 0); 
    -webkit-transform: scale(0, 0); 
} 

/* line 380 */ 
.sky-mega-menu-anim-scale li:hover > div { 
    -o-transform: scale(1, 1); 
    -ms-transform: scale(1, 1); 
    -moz-transform: scale(1, 1); 
    -webkit-transform: scale(1, 1); 
} 

Видимость в подменю при наведении курсора мыши достигается путем установки его opacity до 0, а затем 1 при наведении на соответствующую li

/* line 60 */ 
.sky-mega-menu li > div { 
    ... 
    opacity: 0; 
} 

/* line 101 */ 
.sky-mega-menu li:hover > div { 
    opacity: 1; 
} 

Answer 2

В листе CSS с именем «sky-mega-menu.css» div рядом с литым тегом li установлен в 1, что делает его видимым.

.sky-mega-menu li:hover > div { 
left: 0; 
opacity: 1; 
-webkit-transform: translate(0, 0);