<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 ----------> <div id="topo"> <div class="container"> <div class="row"> <div class="col-md-6 col-ms-6 col-xs-6" id="logo-topo"> <a href="index.php"><h2>LOGO</h2></a> </div> <div class="col-md-6 col-ms-6 col-xs-6" id="abre-menu-topo"> <a href="#" class="btn-collapse"> <div class="lista-collapse"></div> <div class="lista-collapse"></div> <div class="lista-collapse"></div> </a> </div> </div><!--Fim da Row1 --> <div class="row"> <ul id="menu-topo"> <li><a href="index.php">INÍCIO</a></li> <li><a href="portfolio.php">PORTFÓLIO DE PROJETOS</a></li> <li><a href="como-feito.php">ETAPAS DO PROCESSOS</a></li> <li><a href="#contato" class="dentro">FALE CONOSCO</a></li> </ul> </div> </div><!--Fim da coontainer --> </div><!--Fim do topo -->

#topo { z-index: 15; background-color: #FFF; width: 100%; position: fixed; border-bottom: 1px solid #16618D; opacity: 0.9; }#logo-topo img { margin: 2.8% 0 4% 0; }#menu-topo{ border-top: 1px solid #1C79AD; text-align: center; padding: 0; }#menu-topo li{ width: 100%; list-style: none; }#menu-topo li:hover{ }#menu-topo li a{ display: block !important; width: 100%; font-size: 1.5em; padding:1% 0; font-weight: bold; color: #2a6496; }#menu-topo li a:hover{ background-color:#D6D6DC; text-decoration: none; }.btn-collapse { width: 50px; height: 50px; position: relative; padding:0.5% 1%; float: right; margin-top: 3.5%; }.lista-collapse { width: 100%; height: 5px; background-color: #1C79AD; -ms-transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; position: absolute; }.lista-collapse:nth-child(1){top:0;} .lista-collapse:nth-child(2){top:14px;} .lista-collapse:nth-child(1){top:25px;} .botao-lista-cima { -ms-transform: rotate(-50deg) -webkit-transform: rotate(-50deg); -moz-transform: rotate(-50deg); transform: rotate(-50deg); }.botao-lista-baixo { -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); transform: rotate(50deg); }.hidden { visibility: hidden; }.lista-collapse.botao-lista-cima { top: 5px; }.lista-collapse.botao-lista-baixo { top: 5px; }

$(document).ready(function(e) { $('#menu-topo').hide(); var menuaberto = false; $('.btn-collapse').click(function(event) { event.preventDefault(); $('#menu-topo').toggle(''); if(menuaberto == true){ menuaberto = false; $(".lista-collapse:nth-child(1)").removeClass('botao-lista-cima'); $(".lista-collapse:nth-child(2)").removeClass('hidden'); $(".lista-collapse:nth-child(3)").removeClass('botao-lista-baixo'); }else { menuaberto = true; $(".lista-collapse:nth-child(1)").addClass('botao-lista-cima'); $(".lista-collapse:nth-child(2)").addClass('hidden'); $(".lista-collapse:nth-child(3)").addClass('botao-lista-baixo'); } }); });