<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <i class="fa fa-bars" title="Click me!"></i> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul> </div> <a href="https://kieranhunter.co.uk" target="_blank">Pen by Kieran hunter</a> <script> $("i").click(function () { $("ul").toggleClass("open"); }); </script>

body { font-size:12px; font-family:sans-serif; background:#b8e3ef; text-align:center; } .container { text-align:center; /* perfect centering */ left:50%; top:50%; position: absolute; transform:translate(-50%,-50%); width:100%; max-width:350px; } ul { list-style: none; padding: 0; background:#93c7d6; max-height: 0; transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); overflow: hidden; visibility: hidden; border-radius:3px; opacity:0; transform:rotate(180deg); } li a { padding:12px 0; display: block; transition:.25s } li a:hover { background: #6fabbc; } a { color:#fff; text-transform:uppercase; text-decoration: none; } i { padding:20px; background: rgba(255,255,255,.75); border-radius:3px; color:#6fabbc; transition:.25s; animation: 1.25s bounce infinite; } i:hover { cursor:pointer; background: rgba(255,255,255,.95); animation-play-state: paused; } ul.open { max-height: 480px; visibility: visible; opacity:1; transform:rotate(0); } /* animation */ @keyframes bounce { 0% {margin-top:0;} 50% {margin-top:-15px; margin-bottom:15px;} 100% {margin-top:0;} } /* Credit */ .container ~ * { color:#fff; text-transform:uppercase; position: absolute; bottom:10px; left:50%; transform:translateX(-50%); }