"teste apenas"
Bootstrap 3.1.0 Snippet by frederikocmr

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <ul id='menu_escondido' class='menu_escondido' style='width:9%;height: 9%;display: block;color: #000;padding: 8px 16px;'> <li><b>MENU</b></li> </ul> <ul id='navegacao'> <li class='cabecalho'><b>APRESENTAÇÃO</b></li> <li><a>FECHAR ABA</a></li> <li><a>SAIR</a></li> <div id='dpdown' class="dropdown"> <li class=''><a href="#contact">FILTRO POR ÁREA</a></li> <div class="dropdown-content"> <li id='abre'><a> Adicionar tabela conforme filtro</a></li> <a href="#">Adicionar tabela conforme filtro</a> <a href="#">Adicionar tabela conforme filtro</a> <a href="#">Adicionar tabela conforme filtro</a> <a href="#">Adicionar tabela conforme filtro</a> <a href="#">Adicionar tabela conforme filtro</a> <a href="#">Adicionar tabela conforme filtro</a> <a href="#">Adicionar tabela conforme filtro</a> <a href="#">Adicionar tabela conforme filtro</a> </div> </div> </ul> <div id='corpo' class='corpo_ativo'> <div class="card" style="width:100%;"> <header> <h2>Listagem de Sub-Ações</h2> </header> </div> <table id='listagem'> <tr> <th style='width:2%;'>Teste </th> <th style='width:3%;'>Teste 2</th> <th style='width:4%;'>Teste 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </div>
body { margin: 0; font-family: Verdana,sans-serif; } .cabecalho{ background-color: #2E4F9E; display: block; color: white; padding: 8px 16px; text-decoration: none; } h2 { background-color: #2E4F9E; text-align: center; color: white; padding: 2px 2px; margin-top: 0px; } ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; /* background: #f1f1f1; /* For browsers that do not support gradients */ /*background: -webkit-linear-gradient(left, #cccccc , #f1f1f1); /* For Safari 5.1 to 6.0 */ /*background: -o-linear-gradient(right, #cccccc , #f1f1f1); /* For Opera 11.1 to 12.0 */ /*background: -moz-linear-gradient(right, #cccccc , #f1f1f1); /* For Firefox 3.6 to 15 */ /*background: linear-gradient(to right, #cccccc , #f1f1f1); /* Standard syntax */ } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none !important; } li .active { background-color: gray; color: white; } li a:hover:not(.active) { background-color: #d2dfdf; color: black; } li label:hover:not(.active) { background-color: #d2dfdf; color: black; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #d2dfdf} th { background-color: #2E4F9E; color: white; } .card{ box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19) } /* Dropdown */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } .dropdown-content a:hover { background-color: #d2dfdf; color: black; } .dropdown:hover .dropbtn { background-color: #3e8e41; } .menu_escondido { width: 20%; cursor: pointer; } .corpo_ativo{ margin-left:10%; height:1000px; } .corpo_inativo{ margin-left:25%; height:1000px; } /* Fim dropdown*/
$(document).ready(function() { $('#abre').on('click', function () { $("#listagem").append("<tr><td>Teste</td><td>Teste</td><td>$100</td></tr>"); }); //ao clicar em um 'a' $('a').on('click', function () { $("a").removeClass('active'); $(this).addClass('active'); $('#navegacao').hide(); $('#menu_escondido').show(); $("#corpo").toggleClass("corpo_ativo"); }); $('#menu_escondido').on('click', function () { $('#menu_escondido').hide(); $('#navegacao').show(); $("#corpo").toggleClass("corpo_ativo"); }); //$( '#dpdown' ).dropdown(); });

Related: See More


Questions / Comments: