Vaadin 7采样器的菜单是如何完成的？_Vaadin

Vaadin 7采样器的菜单是如何完成的？

vaadin

Vaadin 7采样器的菜单是如何完成的？,vaadin,Vaadin,vaadin 7的采样器演示由用户单击汉堡按钮时弹出的菜单驱动尽管sampler演示有一些示例源代码，但它没有提供演示本身的源代码。我正在想办法重新创建菜单。有什么想法吗？我认为只需使用CSS并在单击按钮时更改某些类属性即可。下面是一个非常简单的示例： <html> <head> <style type=text/css> .box { position: absolute; width: 400px; height: 60%;

vaadin 7的采样器演示由用户单击汉堡按钮时弹出的菜单驱动

尽管sampler演示有一些示例源代码，但它没有提供演示本身的源代码。我正在想办法重新创建菜单。有什么想法吗？

我认为只需使用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>


.盒子{
位置：绝对位置；
宽度：400px；
身高：60%；
背景颜色：绿色；
右：-200px；
-ms转换：所有1秒轻松；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
}
.box_t{top:0}
.box_b{顶部：40%}
.box2\t{
-ms变换：旋转（-90度）倾斜（-20度）；
-webkit变换：旋转（-90度）倾斜（-20度）；
变换：旋转（-90度）倾斜（-20度）；
}
.box2b{
-ms变换：旋转（-90度）倾斜（20度）；
-webkit变换：旋转（-90度）倾斜（20度）；
变换：旋转（-90度）倾斜（20度）；
}
函数changeClass（）{
document.getElementById（“ka_t”）.className=“box-box\u-t-box2\u-t”；
document.getElementById（“ka_b”）.className=“box_b box2_b”；
}
window.onload=函数（）{
document.getElementById（“按钮”）.addEventListener（“单击”，changeClass）；
}
接近