<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> http://lederniergaulois.nouvelles-ecritures.francetv.f/r http://www.hiroaki-kozai.com/ http://www.riiotlabs.com/ ------for background gradiant---- http://www.kikk.be/2015/ ------for background gradiant---- http://johann-malle.cz/ ------site for Design------ http://sailing-with-greenpeace.com/boats ------------for awesome hover effect-------- http://jsfiddle.net/BRDBd/ ----------------------auto complete search on click -------------

.menu-triger { position: relative; margin-left: 10px; width: 30px; height: 30px; cursor: pointer; } .menu-triger span, .menu-triger:before, .menu-triger:after { content: ''; position: absolute; left: 0; display: block; width: 100%; height: 3px; background: #000; transition: all .1s linear; -webkit-transition: all .1s linear; } .menu-triger span { top: 0; } .menu-triger:before { top: 8px; } .menu-triger:after { top: 16px; } .meny-active .menu-triger:before { opacity: 0; transform: translate(-30px, 0); -webkit-transform: translate(-30px, 0); } .meny-active .menu-triger span { transform: rotate(45deg) translate(0, 11px); -webkit-transform: rotate(45deg) translate(0, 11px); } .meny-active .menu-triger:after { transform: rotate(-45deg) translate(0, -12px); -webkit-transform: rotate(-45deg) translate(0, -12px); }