<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/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"> <span class="clicker">≡</span> </div> <div class="hi"> <ul> <li><a href="#">Home</a> <li><a href="#">About</a> <li><a href="#">Rules</a> <li><a href="#">Companies</a> </ul> </div>

body { margin: 0px; } div.container { width: 1439px; background: linear-gradient(#f76a6a, #f95454); height: 90px; } .clicker { -webkit-transition: 0.40s; -moz-transition: 0.40s; -o-transition: 0.40s; -ms-transition: 0.40s; font-size: 70px; padding: 13px; cursor: pointer; color: #ffffff; text-shadow: 0px 2px 3px black; } .clicker:active { text-shadow: 0px 10px 20px black; } li { transition: 0.50s; -webkit-transition: 0.50s; -moz-transition: 0.50s; -ms-transition: 0.50s; -o-transition: 0.50s; padding: 15px; background-color: #5d5d5d; box-shadow: 0px 1px 10px grey; width: 150px; list-style-type: none; } li:hover { background-color: black; padding: 20px; } a { font-family: verdana; text-decoration: none; color: #8ff679; } a:hover { color: white; } a:active { color: black; } .hi { display: none; }

$('.container').on('click', function(){ $('.hi').toggle("medium"); });