Bootstrap Snippet sanjay cros menu bar using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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 -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 $(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');
      }
  });
 });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"sanjay cros menu bar"
Bootstrap 3.3.0 Snippet by sanjay84

Related: See More

Questions / Comments:

"sanjay cros menu bar" Bootstrap 3.3.0 Snippet by sanjay84

Related: See More

Questions / Comments:

"sanjay cros menu bar"
Bootstrap 3.3.0 Snippet by sanjay84