Как меню для пробоотборника Vaadin 7 сделано?

Демоверсия sampler для vaadin 7 управляется меню, которое появляется, когда пользователь нажимает кнопку гамбургера.Как меню для пробоотборника Vaadin 7 сделано?

Несмотря на то, что демо-версия сэмплера содержит некоторые исходные тексты, она не предоставляет источник самой демонстрации. Я пытаюсь понять, как воссоздать это меню. Есть идеи?

источник

2014-10-10 user1596892

Я думаю, что это можно сделать, используя только CSS и изменив атрибут класса при нажатии кнопки. Вот очень упрощенный пример:

<html> 
<head> 
<style type=text/css> 
.box { 
    position: absolute; 
    width: 400px; 
    height: 60%; 
    background-color: green; 
    right: -200px; 
    -ms-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.box_t {top: 0} 
.box_b {top: 40%} 
.box2_t { 
    -ms-transform: rotateY(-90deg) skewY(-20deg); 
    -webkit-transform: rotateY(-90deg) skewY(-20deg); 
    transform: rotateY(-90deg) skewY(-20deg); 
} 
.box2_b { 
    -ms-transform: rotateY(-90deg) skewY(20deg); 
    -webkit-transform: rotateY(-90deg) skewY(20deg); 
    transform: rotateY(-90deg) skewY(20deg); 
} 
</style> 
<script type=text/javascript> 
function changeClass() { 
    document.getElementById("ka_t").className = "box box_t box2_t"; 
    document.getElementById("ka_b").className = "box box_b box2_b"; 
} 
window.onload = function() { 
    document.getElementById("button").addEventListener('click', changeClass); 
} 
</script> 
</head> 
<body style="height: 100%"> 
    <button id=button>Close</button> 
    <div id=ka_t class="box box_t"></div> 
    <div id=ka_b class="box box_b"></div> 
</body> 
</html>

источник

2014-10-10 20:55:29 Krayo

Как меню для пробоотборника Vaadin 7 сделано?

ответ

Смежные вопросы