Publicidade

Entre para seguir isso  
Seguidores 0
marcelobbt

Menu parar no topo da página ao rolar scrol

Pesquisei diversos sites mas não consegui encontrar um código que fizesse o menu parar no topo da página ao rolar o scroll e ao mesmo tempo funcionasse com o bootstrap.

Seria algo desse tipo: http://www.w3schools.com/bootstrap/default.asp

Alguém teria uma dica?

Abaixo parte do meu código:

<div class="row">
	<img class="img-responsive" src="<?php echo base_url(); ?>img/banner.jpg">
</div>
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!--Botão para telas pequenas-->
    <div class="navbar-header ">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">navegacao</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--<a style="padding: 0" class="navbar-brand" href="index.html"><img src="<?php echo base_url(); ?>img/logo.jpg"></a>-->
    </div>
    <!-- Itens do menu -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <?php $this->load->view($menu); ?>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

A ideia é a primeiro div ficar acima do menu e sumir quando o scroll rolar, mas o menu ficar fixo no topo.

Obs.: Nesse código o primeiro div está ficando embaixo do menu.

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso ai é CSS, não JS.

http://www.w3schools.com/howto/howto_css_fixed_menu.asp

To longe de ser perito em CSS mas,

busca por essas tags:

#top {
  position: fixed;
  top: 20px;
}

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas tem uma parte de java script que vai fazer o menu subir até chegar ao topo e então ele muda o css para ficar fixo.

A ideia eu sei. só não estou conseguindo fazer em conjunto com o bootstrap.

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora
Entre para seguir isso  
Seguidores 0

  • Próximos Eventos

  • Conteúdo Similar

    • Por mruoppolo
      Olá, tudo bem?
       
      Eu criei este site aqui: https://www.wpmasterlab.com/ utilizando o bootstrap, mas na versão mobile o menu fica totalmente branco, sem os elementos não estou conseguindo resolver, você tem alguma ideia do que pode ser?
       
      Obrigado :D
    • Por Mateus Martins
      To criando um site pro trabalho da Faculdade, só que depois que q botei o formulário os Dropdown param de abrir, alguem poderia me ajudar a descobrir o pq? ja olhei de todo jeito e n descubro o pq de n abrir
      <!DOCTYPE html> <html lang="pt-br">   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">         <title>Logado</title>     <!-- Bootstrap -->     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">     <link rel="stylesheet" type="text/css" href="css/estilo1.css">     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->     <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>     <![endif]-->     <link rel="stylesheet" href="formoid_files/formoid1/formoid-solid-dark.css" type="text/css" />     <script type="text/javascript" src="formoid_files/formoid1/jquery.min.js"></script>     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>     <!-- Include all compiled plugins (below), or include individual files as needed -->     <script src="bootstrap/js/bootstrap.min.js"></script>     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->   </head>   <body>       <div class="Navegação">       <nav class="navbar navbar-default">           <div class="container">             <div class="navbar-header">             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#barra_navegacao">             <span class="sr-only">Alternar Menu</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             </button>               <a href="#" class="navbar-brand">Logo</a>             </div>             <div class="collapse navbar-collapse" id="barra_navegacao">               <ul class="nav navbar-nav navbar-right">                 <li><a href="#">Lugares</a></li>                 <li><a href="#">Rank</a></li>                 <li><a href="#">Eventos</a></li>                 <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Minha Conta <span class="caret"></span></a>                     <ul class="dropdown-menu">                       <li><a href="#">Editar</a></li>                       <li><a href="#">Logout</a></li>                     </ul>                   </li>                </ul>             </div>           </div>     </nav>     </div>                <div class="page-header">         <h1 style="text-align: center;">Bem-Vindo</h1>         </div>        <div class="Formulario">        <form class="formoid-solid-dark" style="background-color:#ffffff;font-size:14px;font-family:'Open Sans',Arial,Verdana,sans-serif;color:#34495E;max-width:480px;min-width:150px" method="post"><div class="title"><h2>Responda a pesquisa</h2></div>      <div class="element-separator"><hr><h3 class="section-break-title">Destino Visitado</h3></div>   <div class="element-select"><label class="title"></label><div class="item-cont"><div class="medium"><span><select name="select" >     <option value="- Praia do Meireles">- Praia do Meireles</option>     <option value="- Parque do Cocó">- Parque do Cocó</option>     <option value="- Lagoa da Messejana">- Lagoa da Messejana</option>     <option value="- Farol Velho do Mucuripe">- Farol Velho do Mucuripe</option>     <option value="- Escola de Música do Ancuri">- Escola de Música do Ancuri</option>     <option value="- Beach Park (parque temático)">- Beach Park (parque temático)</option>     <option value="- Praia de Iracema">- Praia de Iracema</option>     <option value="- Praia do Futuro">- Praia do Futuro</option>     <option value="- Estação João Felipe">- Estação João Felipe</option>     <option value="- Casa de Cultura Alemã">- Casa de Cultura Alemã</option>     <option value="- Planetário Rubens de Azevedo">- Planetário Rubens de Azevedo</option>     <option value="- Ponte dos Ingleses">- Ponte dos Ingleses</option>     <option value="- Museu do Ceará">- Museu do Ceará</option>     <option value="- Theatro José de Alencar">- Theatro José de Alencar</option>     <option value="- Fortaleza de Nossa Senhora da Assunção">- Fortaleza de Nossa Senhora da Assunção</option>     <option value="- Praça General Tibúrcio">- Praça General Tibúrcio</option>     <option value="- Praça do Ferreira">- Praça do Ferreira</option>     <option value="- Cine São Luiz">- Cine São Luiz</option>     <option value="- Academia Cearense de Letras">- Academia Cearense de Letras</option>     <option value="- Igreja do Rosário ">- Igreja do Rosário </option>     <option value="- Centro Cultural Dragão do Mar de Arte e Cultura">- Centro Cultural Dragão do Mar de Arte e Cultura</option>     <option value="- Praia da Barra do Ceará">- Praia da Barra do Ceará</option></select><i></i><span class="icon-place"></span></span></div></div></div>   <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="input2" placeholder="Insira o destino, caso não esteja na lista"/><span class="icon-place"></span></div></div>   <div class="element-rating"><label class="title">Rating<span class="required">*</span></label><div class="rating"><input type="radio" class="rating-input" id="rating-5" name="rating" value="5" /><label for="rating-5" class="rating-star"></label><input type="radio" class="rating-input" id="rating-4" name="rating" value="4" /><label for="rating-4" class="rating-star"></label><input type="radio" class="rating-input" id="rating-3" name="rating" value="3" /><label for="rating-3" class="rating-star"></label><input type="radio" class="rating-input" id="rating-2" name="rating" value="2" /><label for="rating-2" class="rating-star"></label><input type="radio" class="rating-input" id="rating-1" name="rating" value="1" /><label for="rating-1" class="rating-star"></label></div></div>   <div class="element-separator"><hr><h3 class="section-break-title"> INFRAESTRUTURA</h3></div>   <div class="element-radio"><label class="title">Limpeza Urbana <span class="required">*</span></label>    <div class="column column4"><label><input type="radio" name="radio" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio" value="Muito Ruim " required="required"/><span>Muito Ruim </span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title">Segurança Publica<span class="required">*</span></label>    <div class="column column4"><label><input type="radio" name="radio1" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio1" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio1" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio1" value="Muito Ruim " required="required"/><span>Muito Ruim </span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title">Sinalização turística<span class="required">*</span></label>    <div class="column column4"><label><input type="radio" name="radio2" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio2" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio2" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio2" value="Muito Ruim " required="required"/><span>Muito Ruim </span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title"> Serviço de Táxi <span class="required">*</span></label>    <div class="column column4"><label><input type="radio" name="radio3" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio3" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio3" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio3" value="Muito Ruim " required="required"/><span>Muito Ruim </span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title"> Telecomunicações/Internet <span class="required">*</span></label>    <div class="column column4"><label><input type="radio" name="radio4" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio4" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio4" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio4" value="Muito Ruim" required="required"/><span>Muito Ruim</span></label></div><span class="clearfix"></span> </div>   <div class="element-separator"><hr><h3 class="section-break-title">SERVIÇOS TURÍSTICOS</h3></div>   <div class="element-radio"><label class="title"> Restaurantes/Alimentação <span class="required">*</span></label>   <div class="column column4"><label><input type="radio" name="radio5" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio5" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio5" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio5" value="Muito Ruim" required="required"/><span>Muito Ruim</span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title">Hospedagem<span class="required">*</span></label>   <div class="column column4"><label><input type="radio" name="radio6" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio6" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio6" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio6" value="Muito Ruim" required="required"/><span>Muito Ruim</span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title"> Atrativos Turísticos Visitados <span class="required">*</span></label>   <div class="column column4"><label><input type="radio" name="radio7" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio7" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio7" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio7" value="Muito Ruim" required="required"/><span>Muito Ruim</span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title">Diversão Noturna<span class="required">*</span></label>   <div class="column column4"><label><input type="radio" name="radio8" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio8" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio8" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio8" value="Pessimo" required="required"/><span>Pessimo</span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title"> Informações Turísticas<span class="required">*</span></label>    <div class="column column4"><label><input type="radio" name="radio9" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio9" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio9" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio9" value="Muito Ruim" required="required"/><span>Muito Ruim</span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title">Preços Praticados <span class="required">*</span></label>   <div class="column column4"><label><input type="radio" name="radio10" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio10" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio10" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio10" value="Muito Ruim" required="required"/><span>Muito Ruim</span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title">Guia de Turismo <span class="required">*</span></label>   <div class="column column4"><label><input type="radio" name="radio11" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio11" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio11" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio11" value="Muito Ruim" required="required"/><span>Muito Ruim</span></label></div><span class="clearfix"></span> </div>   <div class="element-radio"><label class="title">Passeios / City Tour<span class="required">*</span></label>   <div class="column column4"><label><input type="radio" name="radio12" value="Otimo " required="required"/><span>Otimo </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio12" value="Bom " required="required"/><span>Bom </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio12" value="Ruim " required="required"/><span>Ruim </span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio12" value="Muito Ruim" required="required"/><span>Muito Ruim</span></label></div><span class="clearfix"></span> </div>   <div class="element-separator"><hr><h3 class="section-break-title">EXPECTATIVAS </h3></div>   <div class="element-checkbox"><label class="title">Você pensou em ir a outra cidade em vez desta nesta viagem?<span class="required">*</span></label>   <div class="column column2"><label><input type="checkbox" name="checkbox[]" value="Sim"/ required="required"><span>Sim</span></label></div><span class="clearfix"></span>     <div class="column column2"><label><input type="checkbox" name="checkbox[]" value="Não"/ required="required"><span>Não</span></label></div><span class="clearfix"></span> </div>   <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="input" placeholder="Caso sim, quais ?"/><span class="icon-place"></span></div></div>   <div class="element-radio"><label class="title">Nesta Viagem, suas expectativas foram: <span class="required">*</span></label>    <div class="column column4"><label><input type="radio" name="radio13" value="Atendidas" required="required"/><span>Atendidas</span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio13" value="Em termos" required="required"/><span>Em termos</span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio13" value="Poucas" required="required"/><span>Poucas</span></label></div><span class="clearfix"></span>     <div class="column column4"><label><input type="radio" name="radio13" value="Nenhuma" required="required"/><span>Nenhuma</span></label></div><span class="clearfix"></span> </div>   <div class="element-checkbox"><label class="title">Você pretende voltar a este destino?<span class="required">*</span></label>    <div class="column column2"><label><input type="checkbox" name="checkbox1[]" value="Sim "/ required="required"><span>Sim </span></label></div><span class="clearfix"></span>     <div class="column column2"><label><input type="checkbox" name="checkbox1[]" value="Não "/ required="required"><span>Não </span></label></div><span class="clearfix"></span> </div>   <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="text" name="input1" placeholder="Caso não, motivo para não voltar"/><span class="icon-place"></span></div></div>   <div class="element-separator"><hr><h3 class="section-break-title">Você tem alguma sugestão ou crítica adicional? </h3></div>   <div class="element-textarea"><label class="title"></label><div class="item-cont"><textarea class="medium" name="textarea" cols="20" rows="5" placeholder="insira sua sugestão ou crítica adicional? "></textarea><span class="icon-place"></span></div></div> <div class="submit"><input type="submit" value="Finalizar"/></div></form><p class="frmd"><a href="http://formoid.com/v29.php">online forms</a> Formoid.com 2.9</p><script type="text/javascript" src="formoid_files/formoid1/formoid-solid-dark.js"></script> <!-- Stop Formoid form-->                  </div>             </div>   </body> </html>  
    • Por ndias
      To fazendo um filtro de busca num menu vertical e quero quando clicar abrir um input search para eu digitar alguma coisa. Acontece que quando eu clico ele abre beleza, mas ao colocar o cursor do mouse dentro da input, ele fecha o menu.
       
      Alguém poderia me ajudar?
       
      Segue o código:
       
      HTML
                          <nav class="navbar navbar-default sidebar" role="navigation">
                              <div class="container-fluid">
                                  <div class="navbar-header">
                                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                                     <a class="navbar-brand" href="#">Busca</a>
                                  </div>
                                  <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                                      <ul class="nav navbar-nav">
                                          <li class="dropdown">
                                              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Qualquer Coisa <span class="caret"></span> </a>
                                              <ul class="dropdown-menu s11">
                                                  <li style="padding: 0 10px;">
                                                  <input type="search" class="form-control sh" placeholder="digite qualquer coisa" data-search="s11">
                                                  </li>
                                              </ul>
                                          </li>
                                      </ul>
                                  </div>
                              </div>
                          </nav>
       
      CSS
      <style>
           nav.sidebar, .main{
        -webkit-transition: margin 200ms ease-out;
        -moz-transition: margin 200ms ease-out;
        -o-transition: margin 200ms ease-out;
        transition: margin 200ms ease-out;
       }  .main{
        padding: 10px 10px 0 10px;
       }  @media (min-width: 765px) {   .main{
         position: absolute;
         width: calc(100% - 40px);
         margin-left: 40px;
         float: right;
        }   nav.sidebar:hover + .main{
         margin-left: 200px;
        }   nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
         margin-left: 0px;
        }   nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
         text-align: center;
         width: 100%;
         margin-left: 0px;
        }   nav.sidebar a{
         padding-right: 13px;
        }   nav.sidebar .navbar-nav > li:first-child{
         border-top: 1px #e5e5e5 solid;
        }   nav.sidebar .navbar-nav > li{
         border-bottom: 1px #e5e5e5 solid;
        }   nav.sidebar .navbar-nav .open .dropdown-menu {
         position: static;
         float: none;
         width: auto;
         margin-top: 0;
         background-color: transparent;
         border: 0;
         -webkit-box-shadow: none;
         box-shadow: none;
        }   nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
         padding: 0 0px 0 0px;
        }   .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
         color: #777;
        }   nav.sidebar{
         width: 200px;
         height: 100%;
         margin-left: -160px;
         float: left;
         margin-bottom: 0px;
        }   nav.sidebar li {
         width: 100%;
        }   nav.sidebar:hover{
         margin-left: 0px;
        }   .forAnimate{
         opacity: 0;
        }
       }  @media (min-width: 1330px) {   .main{
         width: calc(100% - 200px);
         margin-left: 200px;
        }   nav.sidebar{
         margin-left: 0px;
         float: left;
        }   nav.sidebar .forAnimate{
         opacity: 1;
        }
       }  nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #CCC;
        background-color: transparent;
       }  nav:hover .forAnimate{
        opacity: 1;
       }
       section{
        padding-left: 15px;
       }
       ::-webkit-input-placeholder  { color:#29416b!important; }
       input:-moz-placeholder { color:#29416b!important; }
      </style>     Javascript <script type="text/javascript">
       $('input.sh').on('keyup', function(){
         
         var elementFilter = $(this).data('search');
        var dataFilter = $(this);
        var valorBusca = dataFilter.val();
          var contaLetras = valorBusca.length;
           if (contaLetras >= 1) {
            filterData(valorBusca, elementFilter);
           } else {
         $('.'+elementFilter+' li a').parent().show();
         $('.'+elementFilter+' .divider').show();
           }
        
        function filterData(data, elementFilter) {
          
         $('.'+elementFilter+' li a').each(function(iIndex, sElement) {
          $(sElement).parent().hide(); 
          
          $('.'+elementFilter+' .divider').eq(iIndex).hide();
          if (sElement.innerHTML.indexOf(data) !== -1) {
           var obj = $(sElement).parent();
            obj.prev().show();
            obj.next().show();
            obj.show();
           }
         });
       }
       
       function retiraAcentos(palavra) {
        var com_acento = 'áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ';
        var sem_acento = 'aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC';
        var nova='';
        for(i=0;i<palavra.length;i++) {
         if (com_acento.search(palavra.substr(i,1))>=0) {
          nova+=sem_acento.substr(com_acento.search(palavra.substr(i,1)),1);
         }
         else {
          nova+=palavra.substr(i,1);
         }
        }
        return $.trim(nova).toLowerCase();
       }
         
       });
       </script>
    • Por Clamarc
      Boa noite a todos,
       
      Estou montando uns protótipos de telas em html e, quando vou executá-las no Firefox, os links da barra de menu quando clico, não abre a tela referente ao link permanecendo na mesma tela e não me retorna nenhum código de erro... só fica parada na mesma tela e nada (as telas abrem na mesma tela e não em uma aba nova  ou em popup).
       
      Devo observar que no IE e no Goggle Chrome, tal menu FUNCIONA CORRETAMENTE sem problema algum. Alguém sabe se o Firefox tem alguma regra de segurança ou não aceita algum comando html de redirecionamento de tela?.  Desabilitei o origin policy do firefox e mesmo assim a tela do link no menu não abriu.
       
      att
       
    • Por NHeffren
      Boa tarde, estou fazendo um site pro meu TCC do curso técnico da Etec e meu tema foi refazer o site da escola. Comecei a fazê-lo com base no conceito "mobile-first" e tudo a princípio corria bem. Fiz o menu e fui ajustando ele já para as demais resoluções para ver se estava ok. Quando fui fazer os ajustes para telas acima de 1280px e tirar o menu do formato mobile o mesmo começou a apresentar erro: quando passo o mouse pelo item do menu que deveria mostrar as opções abaixo ele parece que compacta todos os itens na mesma linha do menu principal, deu pra perceber que é como se estivesse algo bloqueando o dropdown nas dimensões do menu (foi o que eu entendi). .Estou anexando a INDEX e o CSS para quem puder analisar. Desde já, agradeço.
      index.html
      styles.css