よく見掛けるお品書き一覧を小さいbuttonに格納する技。触れたら一気に全開丸出し、離れたら爆縮という動作。画面右上配置です。改造すれば配置はどうにでもなるでしょう。
<style>
.menu{
background-color:#424;
background-color:rgba(64,32,64,.75);
box-shadow:1px 1px 2px 2px rgba(0,0,0,.5);
border-radius:0 0 0 10px;
font-size:1.25em;
color:#fff;
margin:0;
padding:0 8px 0 30px;
width:0;
height:24px;
-moz-transition:all .25s;
-webkit-transition:all .25s;
-o-transition:all .25s;
-ms-transition:all .25s;
transition:all .25s;
overflow:hidden;
line-height:1.25em;
position:fixed;
top:0;
right:-20px;
z-index:1000
}
.menu:before{
border-right:2px solid #212;
color:#fff;
content:"\2261";
display:block;
background-color:#a6a;
background-color:rgba(160,96,160,.75);
font-weight:700;
position:absolute;
left:0;
width:18px;
height:100%;
text-align:center
}
.menu:hover{
overflow:auto;right:0;height:auto;width:auto
}
/* 配色. 動作と無関係 */
a{color:#fff;text-decoration:none}
a:hover{color:#f88}
</style>
<body>
<dl class=menu>
<dt><a href=#>Information Theory</a>
<dt><a href=#>Godel's first incompleteness theorem</a>
<dt><a href=#>algorithmic probability</a>
<dt><a href=#>Chain rule</a>
<dt><a href=#>Kolmogorov complexity</a>
</dl>
</body>
modal boxとの合体技
See the Pen CSS hamburger + modal box by xezz (@xezz) on CodePen.