用户按下汉堡图标时全屏菜单覆盖

Question

我希望创建一个完整的菜单屏幕叠加层（带有一个选项列表），一旦用户按下汉堡包图标并覆盖浏览器（最好不使用JS，并使用），它将从屏幕顶部滑出HTML5 / CSS3 - 但如果JS是必要的，我不介意使用它）。

最好的解决方法是什么？

我在这里上传了 jsFiddle example 。

HTML

<div id="tb"></div>
<div id="mt">&equiv;</div>
<div id="s1" class="s"></div>

CSS

#tb {
    height: 0.1em;
    background-color: #1f1f1f;
    position: fixed;
    z-index: 2;
    width: 100%;
    box-shadow: 0 0 3px #1f1f1f;
}
#mt {
    position: fixed;
    z-index: 2;
    left: 90%;
    box-shadow: #1f1f1f 0px 0px 3px 0px;
    background-color: #1f1f1f;
    padding: 0.3em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #ffffff
}
#menuIcon:hover {
    opacity: 0.6;
    cursor: pointer;
}
#s1 {
    background: url('http://static.tumblr.com/78708c8c0ab6a659f4323a82d54d4dc5/cjtdloz/V9Fmyvp0z/tumblr_static_red_redder_reddest.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
    height: 50em;
}