如何創建類似菜單動畫的Chrome移動設備？

Question

Chrome移動版使用Google的材質設計獲得了精美的菜單動畫：

Chrome的操作菜單： 圖片

最酷的是菜單項按順序打開的方式。 使用CSS，jQuery或同時使用CSS和jQuery，最正確的方法是什么？

Answer 1

僅CSS：

http://jsfiddle.net/coma/obeqs75k/

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400);

html {
    font-family: Roboto;
}

menu {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

menu div.links a {
    display: block;
    padding: 18px;
}

menu div.icons > * {
    display: block;
    float: right;
    width: 52px;
    height: 52px;
    background: red;
}

menu div.icons:after {
    content: "";
    display: block;
    clear: both;
}

menu > div {
    overflow: hidden;
    width: 52px;
    height: 52px;
    transition: all 350ms;
}

menu > div:after {
    content: "";
    display: block;
    position: absolute;
    top: 52px;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 10%,#fff 100%);
    opacity: 1;
    transition: top 500ms;
    transition-delay: 250ms;
}

#toggle {
    display: none;
}

#toggle:checked + div {
    width: 286px;
    height: 520px;
}

#toggle:checked + div:after {
    top: 100%;
}

HTML

<menu>
    <input type="checkbox" id="toggle"/>
    <div>
        <div class="icons">
            <label for="toggle"></label>
        </div>
        <div class="links">
            <a>New tab</a>
            <a>New incognito tab</a>
            <a>Bookmarks</a>
            <a>Recent tabs</a>
            <a>History</a>
            <a>Print...</a>
            <a>Request Desktop site</a>
            <a>Settings</a>
            <a>Help & Feedback</a>
        </div>
    </div>
</menu>