<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"> <p> </p> <p> </p> <input type="checkbox" id="toggle-menu" class="toggle-menu" name=""> <label for="toggle-menu"> <span class="menu-bar"></span> <span class="menu-bar"></span> <span class="menu-bar"></span> </label> <p> </p> <input type="checkbox" id="toggle-menu-2" class="toggle-menu-2" name=""> <label for="toggle-menu-2"> <span class="menu-bar-2"></span> <span class="menu-bar-2"></span> <span class="menu-bar-2"></span> </label> <h1>CSS3 Toggle Menu Animation</h1> <p>Click the Menu Toggle to see the animation</p> </div>

.toggle-menu { display: none; } .menu-bar { width: 30px; height: 4px; border-radius: 4px; background: #000; display: block; position: relative; transition: .20s ease-in-out; } label[for="toggle-menu"]{ height: 24px; cursor: pointer; } .menu-bar:nth-child(1){ top: 0; } .menu-bar:nth-child(2){ top: 7px; left: 0; } .menu-bar:nth-child(3){ top: 14px; } .toggle-menu:checked + label[for="toggle-menu"] span:nth-child(1) { transform: rotate(135deg); top: 10px; } .toggle-menu:checked + label[for="toggle-menu"] span:nth-child(2) { opacity: 0; left: -50px; } .toggle-menu:checked + label[for="toggle-menu"] span:nth-child(3) { transform: rotate(-135deg); top: 4px; } .toggle-menu-2 { display: none; } .menu-bar-2 { width: 30px; height: 4px; border-radius: 4px; background: #000; display: block; position: relative; transition: .20s ease-in-out; } label[for="toggle-menu-2"]{ height: 24px; cursor: pointer; } .menu-bar-2:nth-child(1){ top: 0; } .menu-bar-2:nth-child(2){ top: 7px; } .menu-bar-2:nth-child(3){ top: 14px; } .toggle-menu-2:checked + label[for="toggle-menu-2"] span:nth-child(1) { transform: rotate(45deg); top: 10px; } .toggle-menu-2:checked + label[for="toggle-menu-2"] span:nth-child(2) { opacity: 0; transform: rotate(-90deg); } .toggle-menu-2:checked + label[for="toggle-menu-2"] span:nth-child(3) { transform: rotate(-45deg); top: 4px; }