Geek Answers Handbook

How is the menu for the Vaadin 7 sampler made?

The sampler demo for vaadin 7 is controlled by a menu that appears when the user presses the hamburger button.

Although the sampler demo contains some source code for examples, it does not provide a source for the demo itself. I am trying to figure out how to recreate this menu. Any ideas?

+4
source share
1 answer

I think this can be done using only CSS and changing the class attribute when the button is clicked. Here is a very simplified example:

<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>
0
source

More articles:


All Articles