Как написать кросc-браузерное решение под IE для выпадающего меню. Например во всех популярных браузерах мы используем классное решение, а вот для IE мы напишем другие правила, олдскульные либо самое простой появление блока.
Делаю Я выпадающее меню с эффектом
perspective.
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
Этот эффект дает интересное раскрытие блока.
Итак, HTML код такой:
<div id="nav">
<ul>
<li><a href="#">Каталог 1</a>
<ul>
<li>Содержание каталога 1 - Это раскрывшийся сверху блок</li>
</ul>
</li>
<li><a href="#">Каталог 2</a>
<ul>
<li>Содержание каталога 2 - Это раскрывшийся сверху блок</li>
</ul>
</li>
<li><a href="#">Каталог 3</a></li>
<li><a href="#">Каталог 4</a></li>
<li><a href="#">Каталог 5я</a></li>
</ul>
</div>
А CSS конкретно для эффекта такой:
@media {
#nav ul li ul {
max-height:0;
overflow: hidden;
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform-origin: 50% 0;
-webkit-transition: 350ms;
-moz-transition: 350ms;
transition: 350ms;
}
#nav ul li:hover ul {
max-height: 1000px;
transform: perspective(400px) rotate3d(0, 0, 0, 0);
padding:9px 0px;
}
}
Я встречал такие интересные приёмы, один из них можете посмотреть ниже:
В этом коде - классы и блоки не относится к данному заданию! Я просто показываю пример рабочего правила, путь реализации где специально под IE прописаны конкретно другие правила.
@supports (-ms-ime-align: auto) {
.sm_povorot .sm_face {transform-origin : 0 !important; }
}
@media all and (-ms-high-contrast: none) {
// .sm_povorot .sm_face:before,.sm_povorot .sm_face:after,.sm_povorot .sm_face {
transform-origin : 0 !important; } /* IE10 */
ul#supermenu_stage_1 li:hover .sm_face,
ul#supermenu_stage_2 li:focus .sm_face,
ul#supermenu_stage_2 li:hover .sm_face,
ul#supermenu_stage_1 li:focus .sm_face {
transform-origin: 50% 50% -9px;
}
// *::-ms-backdrop, .sm_povorot .sm_face {transform-origin : 0 !important; } /* IE11 */
} /* The end of: @media all and (-ms-high-contrast:none) */
Подскажите как бы мне адаптировать данный прием под мою задачу или может быть кто предложит другие варианты\способы. Может быть у кого то есть интересная статья по данному способу реализации.
Спасибо.
Простой
